0

我正在为 Google Chrome 开发一个扩展程序。当用户选择某个文本区域时，它具有文本突出显示功能。当涉及到单个标签时，我可以<span>在该特定标签内使用一个标签。到目前为止，我所做的如下。

var divs = document.getElementsByTagName("p");

   for(var d in divs) {
      // highlight a part of a <p> tag
        divs[d].addEventListener('mouseup',function(){var str= document.getSelection() ;alert(str);          
        this.innerHTML =this.innerHTML.replace(str,'<span style="background-color: '+'yellow'+' ">'+str+'</span>');
        }); 
  }

但是如果用户选择几个标签区域（连续标签）我该怎么做。我不能在<span>那里放一个标签。我必须<span>为每个选定的标签使用标签。

1）如何检测和获取用户选择的标签。以及起点和终点。？

2）如何一次改变它们的背景颜色。？

3）我想添加听众，如果是我应该怎么做？

任何帮助将不胜感激。

4

1 回答 1

1

我已经理解了以下内容：

  • 您的扩展程序会更改用户在网页中选择的文本（底层段落节点）的背景颜色。
  • 当前，您的实现添加了一个 EventListener 以在段落标签内注入一个跨度标签

    如果事件 mouseup 触发。

  • 如果用户选择了多个叶节点，您想知道如何突出显示所选区域（节点）？

我对你的理解正确吗？

据我了解您的问题，您可以执行以下操作。如果选择了多个节点，您可以在所选文本中的每个节点上设置背景颜色：

基于这个html：

<h2>How to set background color of selected text</h2>
<div>   
    <h3 id="h">This is a headline</h3>
    <p id="p1">This is the first paragraph</p>
    <p id="p2">This is the second paragraph</p>
    <button id="b1" onclick="colorSelectedNodes()">color selected nodes</button>
</div>

您可以使用以下 Javascript：

function colorSelectedNodes(){
    var ds= document.getSelection();
    var elements = []
        // only start node if selection occured from start to end 
        // (from top left to right bottom)
    var anchorNode = ds.anchorNode.parentNode; 
    var elementSibling = anchorNode.nextElementSibling;
    var focusNode = ds.focusNode.parentNode; // endnode

    while(elementSibling.nextElementSibling){
        console.log("elementSibling", elementSibling);
        elementSibling.style.backgroundColor = "#00FFFF";           
        elementSibling.style.fontWeight = "bold";
        elementSibling.style.color = "blue";
        elementSibling = elementSibling.nextElementSibling;
    }
    // just to show focus and end node
    anchorNode.style.backgroundColor = "lightgreen"; 
    focusNode.style.backgroundColor = "yellow"; 
    console.log("anchorNode", anchorNode);
    console.log("focusNode", focusNode);
}

有几点需要注意

我希望我的回答能让你朝着正确的方向前进。如果您有更多问题，请随时提问。

于 2013-08-10T11:08:57.967 回答