如果id匹配但保留文字，則刪除標籤

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