Question

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

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

<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 /的匹配。

Answer 1

如果我理解正确，你想转过来：

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

Answer 2

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

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

但如果您只想为此使用js，user113716

上有Link解决方案

DEMO

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

如果id匹配，则删除标记但保留文本

2 个答案: