split a html tag by its selection in javascript

Question

Want to split the tag by two. I have the tag like this

<span class="ss" custom-attr="kk"> split content here, and have to split </span>

If I select the content and have and click a button, I want to split a tag like this. Even span contains many attributes. I want to split with that attributes.

<span class="ss" custom-attr="kk"> split content here, </span>and have <span class="ss" custom-attr="kk">to split </span>

i can get the selected text by using window.getSelection(). ex: https://jsfiddle.net/rx5ojfwc/

https://stackoverflow.com/questions/6328718/wrapping-a-selected-text-node-with-span — Skribja, Jul 14 '17 at 12:07
I want a to split tag, not have to insert a new tag. @Skribja — Sathish, Jul 14 '17 at 12:14

score 0 · Answer 1 · answered Jul 14 '17 at 12:15

You can use this function:

function getSelectionText() {
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
    }
    return text;
}

Create your tag and replace the content:

var myNewTag = '</span>' + getSelectionText() + '<span>';

The function is from user Tim Down: Get the Highlighted/Selected text

I cannot use this for dynamic content, because the span will class names, styles or any custom attributes. — Sathish, Jul 14 '17 at 12:17

Mr. Polywhirl · Answer 2 · 2017-07-14T12:58:52.637

HTML Version

Using a jQuery plugin, you can grab the selection, and perform the replace. It's dynamic so that you don't even need to know if it's a <span> tag.

(function($) {
  $.getSelectedText = function() {
    if (window.getSelection) {
      return window.getSelection().toString();
    } else if (document.selection) {
      return document.selection.createRange().text;
    }
    return '';
  };
  $.fn.spanSelectReplace = function() {
    var tag = this.prop('tagName').toLowerCase();
    var tStart = '<' + tag + '>';
    var tEnd = '</' + tag + '>';
    var selText = $.getSelectedText();
    return this.replaceWith(tStart + this.html().replace(selText, tEnd + selText + tStart) + tEnd);
  }
})(jQuery);

$('button').on('click', function() {
  $('span').spanSelectReplace(); // Perform the jQuery function.
  console.log($('span').parent().html()); // Print the HTML to the console.
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Split content here, and have to split</span>
<br />
<button>Split</button>

Output

<span>Split content here, </span>and have<span> to split</span>

Old Version — Text Only

Highlight the "and have " portion of the text in the text area and hit the Split button.

The text will be replaced by wrapping the selection in closing-opening <span> tags.

function splitText(button) {
  var formEl = document.getElementById('content');
  var selection = getSelection(formEl);
  
  formEl.value = formEl.value.replace(selection, '</span>' + selection + '<span>');
}

function getSelection(field) {
  var start = field.selectionStart;
  var finish = field.selectionEnd;
  
  return field.value.substring(start, finish);
}

textarea { width: 100%; }

<textarea id="content" rows="5"><span> split content here, and have to split </span></textarea>
<br>
<input type="button" value="Split" onClick="splitText(this)" />

I cannot use this for dynamic content, because the span will have class names, styles or any custom attributes — Sathish, Jul 14 '17 at 12:27
@Sathish Using a jQuery plugin makes it easier. You just need to manipulate the span by modifying its outer HTML. — Mr. Polywhirl, Jul 14 '17 at 12:41

score -1 · Answer 3 · answered Jul 14 '17 at 12:10

-1

You can do this using replace() very easily.

var str = "<span> split content here, and have to split </span>";
var res = str.replace("here,", "here, </span>");
res = res.replace("have ", "have <span>");

Check out: https://www.w3schools.com/jsref/jsref_replace.asp

answered Jul 14 '17 at 12:10

Michael

1,247
1
8
18

That was manual selection, not the static string to replace. the selection was my dragging the mouse.. – Sathish Jul 14 '17 at 12:16
So, now you know how to search and replace a string. Now you need to research how to make the rest, I'm not going to write the code for you :) Here is a hint: https://stackoverflow.com/questions/5379120/get-the-highlighted-selected-text – Michael Jul 14 '17 at 12:19
I got the selected text, but i want to split the tag, i can able to insert a new tag inside the selection. but cannot split. For that only i want answer. – Sathish Jul 14 '17 at 12:20
@Sathish this is again the case where the answer was submitted before edits, please check the edit history and please don't downvote "innocent answers !! lol.." – tam Jul 14 '17 at 12:44

score -1 · Answer 4 · answered Jul 14 '17 at 12:21

-1

You can split() and join() and replace() to achieve this:

Storing the string into a var:

var str = "<span> split content here, and have to split </span>";

Manuplating the string:

str.split(",").join(", </span>").replace("and have", "and have <span>")

var str = "<span> split content here, and have to split </span>";
str.split(",").join(", </span>").replace("and have", "and have <span>")
console.log(str);

answered Jul 14 '17 at 12:21

tam

352
1
3
13

this is not what the OP is asking for. – Lorenzo Marcon Jul 14 '17 at 12:23
Its not like that the static content, the content was selecting by manual mouse dragging. – Sathish Jul 14 '17 at 12:24
Guys, please check the edit history, as I think more info was added at the later part of asking the initial question! – tam Jul 14 '17 at 12:35

split a html tag by its selection in javascript

4 Answers4

HTML Version

Output

Old Version — Text Only