从选定/高亮文本中看到this post about getting the html。它在获取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());

但是,假设有一个html:
<p>I am <span style="color:green;">green</span> and I have <span style="background-color:yellow;">yellow background<span>.</p>

现在,如果绿色这个词被突出显示,那么它只会得到这个词
“绿色”
即使被包围了。但是,如果选择的字符多于单词green(在单词green之前或之后说空格,如“green”),它也将得到html标记,例如:
<span style="color:green;">green</span>

Please check out the demo
即使只突出显示了“green”一词,也可以得到html吗?
最后,我想实现的是假设我想将突出显示的文本的颜色更改为蓝色,然后首先检查突出显示的文本是否有跨度。其次,这个跨度是有颜色的还是有背景的,甚至是有两种样式的。最后对突出显示的文本进行更改。
$('#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');
  }
});

如何获取突出显示文本的html并相应地更改它?如果你能帮我度过难关,那真的意义重大。谢谢您。
Demo

最佳答案

做这个,

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;
}

关于javascript - jQuery获取突出显示的文本的html并更改其样式,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/32542625/

10-12 12:30
查看更多