如何刪除突出顯示的單詞？

Question

<input type="text" id="search"> 
<input type="button" id="button" onmousedown="doSearch(document.getElementById('search').value)" value="Find"> 

<div id="content"> 
<p>Hello World!</p> 


function doSearch(text) { 
if (window.find && window.getSelection) { 
    document.designMode = "on"; 
    var sel = window.getSelection(); 
    sel.collapse(document.body, 0); 

    while (window.find(text)) { 
     document.execCommand("HiliteColor", false, "yellow"); 
     sel.collapseToEnd(); 
    } 
    document.designMode = "off"; 
} else if (document.body.createTextRange) { 
    var textRange = document.body.createTextRange(); 
    while (textRange.findText(text)) { 
     textRange.execCommand("BackColor", false, "yellow"); 
     textRange.collapse(false); 
    } 
} 
} 

嘿傢伙，我在這裏面臨一個問題。如何在我再次按下查找按鈕後刪除突出顯示的單詞？

Answer 1

你需要檢查是否已經有一個高亮類的元素。如果是，則首先刪除內容div p元素內的所有突出顯示的跨度。

if(document.querySelector('span[style*="background-color: yellow;"]') !== null) { 
     var elem = document.querySelector("#content p"); 
     var txt = elem.innerText || elem.textContent; 
     elem.innerHTML = txt; 
    } 

function doSearch(text) { 
 
    
 
    if(document.querySelector('span[style*="background-color: yellow;"]') !== null){ 
 
     var elem = document.querySelector("#content p"); 
 
     var txt = elem.innerText || elem.textContent; 
 
     elem.innerHTML = txt; 
 
    } 
 
    
 
if (window.find && window.getSelection) { 
 
    document.designMode = "on"; 
 
    var sel = window.getSelection(); 
 
    sel.collapse(document.body, 0); 
 

 
    while (window.find(text)) { 
 
     document.execCommand("HiliteColor", false, "yellow"); 
 
     sel.collapseToEnd(); 
 
    } 
 
    document.designMode = "off"; 
 
} else if (document.body.createTextRange) { 
 
    var textRange = document.body.createTextRange(); 
 
    while (textRange.findText(text)) { 
 
     textRange.execCommand("BackColor", false, "yellow"); 
 
     textRange.collapse(false); 
 
    } 
 
} 
 
}

<input type="text" id="search"> 
 
<input type="button" id="button" onmousedown="doSearch(document.getElementById('search').value)" value="Find"> 
 

 
<div id="content"> 
 
<p>Hello World!</p> 
 
</div>