jquery getting the html of highlighted text and changing its style

Question

Saw this post about getting the html from the selected/higlighted text. And it does work in getting the html.

function getSelectionHtml() {
    var html = "";
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var container = document.createElement("div");
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                container.appendChild(sel.getRangeAt(i).cloneContents());
            }
            html = container.innerHTML;
        }
    } else if (typeof document.selection != "undefined") {
        if (document.selection.type == "Text") {
            html = document.selection.createRange().htmlText;
        }
    }
    return html;
}

alert(getSelectionHtml());

But, suppose there's this html:

<p>I am <span style="color:green;">green</span> and I have <span style="background-color:yellow;">yellow background<span>.</p>

Now if the word green is highlighted, then it will just get the word

"green"

even if there's <span> tag surrounded. But if selected more character than the word green (say the space before or after the word green like this " green"), it will get the html tag too, such as:

<span style="color:green;">green</span>

Please check out the demo

Is it possible to get the html even if only the word "green" is highlighted?

Eventually what I want to achieve is suppose I want to change the color of the highlighted text to blue color, then first check if the highlighted text has a span. Secondly whether that span has color or background or even both styling. And lastly do the changes to the highlighted text.

$('#change_blue').on("click", function() {
  var sel = getSelectionHtml();
  /*var span = sel.find("<span").html();*/
  alert(sel);
  if (sel.match("<span style=")) {
   console.log('has span tag');
    if (sel.indexOf("background") > -1 && sel.indexOf("color") > -1 ) {
      console.log('has both background and color')

      // change color to blue
    }
    else if (sel.match("color")) {
      console.log('only color')

      // change color to blue
    }
    else {
      console.log('only background')

      // add blue color
    }
  }
  else {
    console.log('no span tag');
  }
});

How can I get the html of a highlighted text and change it accordingly? It would really mean a lot if you could help me through. Thank you.

Demo

Try data-attributes. You can assign arbitrary data to it. It'd probably be perfect for indexing colors, current state, etc. https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes — zer00ne, Sep 12 '15 at 19:24
http://jsfiddle.net/RachGal/19odo42x/ use ::selection to change the color -i fixed a few js errors — Rachel Gallen, Sep 12 '15 at 19:34
@RachelGallen Yes. But I want it to change permanently, not just only when its highlighted. — Geum, Sep 12 '15 at 20:02

score 1 · Accepted Answer · answered Sep 13 '15 at 16:23

Do this,

function getSelectionHtml() {
  var html = "";
  if (typeof window.getSelection != "undefined") {
    var sel = window.getSelection();
    if (sel.rangeCount) {
      var container = document.createElement("div");
      for (var i = 0, len = sel.rangeCount, range; i < len; ++i) {
        range = sel.getRangeAt(i);
        if (range.startContainer === range.endContainer
            && range.startContainer.nodeType === Node.TEXT_NODE
            && range.startOffset === 0
            && range.endOffset === range.startContainer.length) {
          range.selectNode(range.startContainer.parentElement);
        }
        container.appendChild(range.cloneContents());
      }
      html = container.innerHTML;
    }
  } else if (typeof document.selection != "undefined") {
    if (document.selection.type == "Text") {
      html = document.selection.createRange().htmlText;
    }
  }
  return html;
}

jquery getting the html of highlighted text and changing its style

1 Answers1

Linked