javascript - 使用 Javascript 突出显示范围不起作用

Question

以下用于突出显示范围的代码失败。 Try out the code.

function rangeFromString(rangeString)
{
     var rangeStringSplit = rangeString.split(/\|/g);
     var range = document.createRange();
     var node = document.evaluate(rangeStringSplit[0], document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
     range.setStart(node, Number(rangeStringSplit[1]));
     node = document.evaluate(rangeStringSplit[2], document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
     range.setEnd(node, Number(rangeStringSplit[3]));
     console.log(range);
     return range;
}

function highlightRangeString(rangeString,color)
{
     if (rangeString != null)
     {
          var range = rangeFromString(rangeString);
          console.log(range);

          var sel = window.getSelection();
          sel.removeAllRanges();

          sel.addRange(range);
          document.designMode = "on";
          document.execCommand("hiliteColor", false, "#"+color);
          sel.removeAllRanges();
          document.designMode = "off";
     }
}

我试过下面的代码，

highlightRangeString("/HTML[1]/BODY[1]/DIV[1]/DIV[2]/P[1]/SPAN[1]/text()[1]|2|/HTML[1]/BODY[1]/DIV[1]/DIV[2]/P[1]/SPAN[1]/text()[1]|20", "ff0000");

这段代码有什么问题？

我如何选择并应用突出显示到一个范围？

Answer 1

这是因为您要突出显示的字符是文本节点中的空白字符，并且在呈现的 HTML 中折叠，因此包含它们的选择也会折叠。如果删除 <span> 中的换行符和缩进包含文本的元素，它将按您预期的方式工作。

演示:http://jsfiddle.net/zjd3d7ud/5/