1

我有一个荧光笔功能，可以将匹配的单词格式化为带有黄色 bg-color 的锚，我需要一个函数来删除下一次搜索的锚元素。

第一个匹配词的标记如下所示：

<a id="searchword1" class="searchword" style="background-color: yellow; text-decoration: none; color: black;">my text</a>

我需要删除锚点，但将我的文本留在那里。我的文档中还有其他我不想干涉的锚点。我需要在纯 Javascript（没有 jQuery）中执行此操作。

  • 附加要求：删除标签后不要创建新行，保持原样。

感谢enhzflep，到目前为止的代码：

for (z=0;z<szam;z++){
    var removal = parent.frames['pagina'].document.getElementById("searchword"+z);
    var highlightedText = removal.innerHTML.toLowerCase;
    removeh(removal,highlightedText,doc);
    }


function removeh(node,high,doc) {
doc = typeof(doc) != 'undefined' ? doc : document;
    if (node.hasChildNodes) {
        var hi_cn;
        for (hi_cn=0;hi_cn<node.childNodes.length;hi_cn++) {
            removeh(node.childNodes[hi_cn],high,doc);           
        }
    }
        //1. Get element containing text
    if (node.nodeType == 3) {
    tempnode = node.nodeValue.toLowerCase();
    if (tempnode.indexOf(high) != -1) {
    nv = node.nodeValue;
    nv = node.nodeValue;
    ni = tempnode.indexOf(high);
        //2. Get the text it contains
    before = doc.createTextNode(nv.substr(0,ni));
    dochighVal = nv.substr(ni,high.length);
    after = doc.createTextNode(nv.substr(ni+high.length));
        //3. Get the highlighted element's parent
    var daddy = node.parentNode;
        //4. Create a text node:
    var newNode = document.createTextNode(dochighVal);
        //5. Insert it into the document before the link
    daddy.insertBefore(before, node);
    daddy.insertBefore(newNode, node);
    daddy.insertBefore(after, node);
        //6. Remove the link element
    daddy.removeChild(node);
    }
    }
}

其中 num 是匹配单词的数量。

出于某种原因，这不起作用，请帮忙，我也会接受解决这个小问题的答案。

两个答案的方法是正确的，但它仍然有问题，因为它将结果文本与新行分开。这使得荧光笔功能将“我的单词”作为单独的临时节点值获取，并且无法突出显示 /my.word/ 的匹配项。

4

2 回答 2

3

如果我理解正确，您希望将其转为：

<a id="searchword1" class="searchword" style="background-color: yellow; text-decoration: none; color: black;">my text</a>

进入这个：

my text

如果是这样的话，那就很容易了。

就目前而言，看起来您正在要求您显示的元素的子元素（该元素没有任何子元素，除了文本节点。我希望您的脚本被第 2 行冲洗 - 当它试图生一个不存在的孩子）

 //1. Get element containing text

    var element = document.getElementById('searchWord1');


 //2. Get the text it contains

     var highlightedText = element.innerHTML;


//3. Get the highlighted element's parent

    var parent = element.parentNode;


//4. Create a text node:

    var newNode = document.createTextNode(highlightedText);


//5. Insert it into the document before the link

    parent.insertBefore(newNode, element);


//6. Remove the link element

   parent.removeChild(element);
于 2012-10-03T13:29:10.007 回答
1

如果您使用的是 jQuery，那将是简单的DEMO

$('#searchword1').contents().unwrap();

但是，如果您只想为此使用 js，则链接上有user113716的解决方案

演示

var b= document.getElementsByClassName('searchword');

while(b.length) {
    var parent = b[ 0 ].parentNode;
    while( b[ 0 ].firstChild ) {
        parent.insertBefore(  b[ 0 ].firstChild, b[ 0 ] );
    }
     parent.removeChild( b[ 0 ] );
}
于 2012-10-03T13:38:27.460 回答