17

我使用鼠标在 html 页面（在 firefox 中打开）上选择了一些文本，并使用 javascript 函数创建/获取与所选文本相对应的范围对象。

 userSelection =window.getSelection(); 
 var rangeObject = getRangeObject(userSelection);

现在我想突出显示范围对象下的所有文本。我这样做是这样的，

  var span = document.createElement("span");
  rangeObject.surroundContents(span);
  span.style.backgroundColor = "yellow";

好吧，这很好用，只有当范围对象（起点和终点）位于同一个文本节点中时，它才会突出显示相应的文本。例如

    <p>In this case,the text selected will be highlighted properly,
       because the selected text lies under a single textnode</p>

但是如果范围对象覆盖了多个文本节点，那么它就不能正常工作，它只突出显示位于第一个文本节点中的文本，例如

 <p><h3>In this case</h3>, only the text inside the header(h3) 
  will be highlighted, not any text outside the header</p>

知道如何制作范围对象下的所有文本，突出显示，与范围位于单个节点还是多个节点无关？谢谢....

4

5 回答 5

25

我建议使用document's 或TextRange'execCommand方法，它就是为此目的而构建的，但通常用于可编辑文档中。这是我对类似问题的回答：

以下应该做你想要的。在非 IE 浏览器中，它打开 designMode，应用背景颜色，然后再次关闭 designMode。

更新

固定在 IE 9 中工作。

2013 年 9 月 12 日更新

这是一个链接，详细说明了删除此方法创建的高光的方法：

https://stackoverflow.com/a/8106283/96100

function makeEditableAndHighlight(colour) {
    var range, sel = window.getSelection();
    if (sel.rangeCount && sel.getRangeAt) {
        range = sel.getRangeAt(0);
    }
    document.designMode = "on";
    if (range) {
        sel.removeAllRanges();
        sel.addRange(range);
    }
    // Use HiliteColor since some browsers apply BackColor to the whole block
    if (!document.execCommand("HiliteColor", false, colour)) {
        document.execCommand("BackColor", false, colour);
    }
    document.designMode = "off";
}

function highlight(colour) {
    var range;
    if (window.getSelection) {
        // IE9 and non-IE
        try {
            if (!document.execCommand("BackColor", false, colour)) {
                makeEditableAndHighlight(colour);
            }
        } catch (ex) {
            makeEditableAndHighlight(colour)
        }
    } else if (document.selection && document.selection.createRange) {
        // IE <= 8 case
        range = document.selection.createRange();
        range.execCommand("BackColor", false, colour);
    }
}
于 2010-04-06T09:50:11.880 回答
6

Rangy是一个跨浏览器的范围和选择库，它的CSS 类应用程序模块完美地解决了这个问题。我正在使用它在一系列桌面浏览器和 iPad 上实现突出显示，它运行良好。

Tim Down 的回答很好，但 Rangy 让您不必自己编写和维护所有功能检测代码。

于 2012-10-09T11:30:58.243 回答
1

您能否详细说明此功能的需求。如果您只想更改所选文本的突出显示样式，您可以使用 CSS: '::selection'

更多信息： http ://www.quirksmode.org/css/selection.html https://developer.mozilla.org/en/CSS/::selection

于 2010-04-06T06:59:15.373 回答
1 
var userSelection = document.getSelection();
var range = userSelection.getRangeAt(0);

您可以通过以下方式使用 appendChild 和 extractContents 方法，而不是 roundContent 方法：

let newNode = document.createElement('mark');
newNode.appendChild(range.extractContents());
range.insertNode(newNode);


function markNode() {
if(document.getSelection() && document.getSelection().toString().length){
let range = document.getSelection().getRangeAt(0);
let newNode = document.createElement('mark');
      newNode.appendChild(range.extractContents());
      range.insertNode(newNode);
}
else{
alert('please make selection of text to mark');
}
}

function resetContent() {
      testMe.innerHTML = `Remember: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Node">Read</a> and <strong>stay strong</strong>`;
}
<p id="testMe">Remember: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Node">Read</a> and <strong>stay strong</strong></p>


<div><button onclick="markNode()">markNode</button></div>
<div><button onclick="resetContent()">resetContent</button></div>

于 2020-11-19T10:19:26.013 回答
0

您可以尝试为周围的跨度添加一个类并应用分层 CSS 吗？

var span = document.createElement("span");
span.className="selection";
rangeObject.surroundContents(span);

在 CSS 定义中，

span.selection, span.selection * {
   background-color : yellow;  
}

我没有尝试。但只是猜测它会起作用。

于 2010-04-06T09:34:44.657 回答