如何在javascript中突出顯示找到的文本

Question

我正試圖在使用javascript的html文檔中實現查找和替換文本。替換部分正常工作。但我想強調的是要在HTML文檔中要替換的文字（如鉻，當我們用ctrl + F）。到目前爲止我的代碼是

<form name ="rep" class="replace" id="repf"> 
    <table> 
     <tr> 
      <td>Replace <input class="data1" type="text" id="rp" onchange="highlight()"></td> 
      <td>With <input type="text" id="ne"></td> 
     </tr> 
     <tr> 
      <td></td> 
      <td><input type="button" onclick="replace();" value="confirm"></td> 
     </tr> 
    </table> 
</form> 

所以我用一個onchange事件輸入字段和callded功能亮點（）

function replace() { 
    var tx = document.getElementById('rp').value; 
    var ne = document.getElementById('ne').value; 
    var re = new RegExp(tx, "g"); 
    document.body.innerHTML = document.body.innerHTML.replace(re, ne); 
    document.getElementById('repf').style.display = 'none'; 
} 

function highlight() { 
    var tx = 0; 
    tx = document.getElementById('rp').value; 
    alert(tx); 
    var ne = '<span style="color:blue;">' + tx + '</span>'; 
    var de = new RegExp(tx, "g"); 
    document.body.innerHTML = document.body.innerHTML.replace(de, ne); 
    return; 
} 

但onchange事件後，輸入字段的值上cleared.pls幫助

Answer 1

edit

search

腳本

function highlight() { 
    var text = document.getElementById("text-search").value; 
    var query = new RegExp("(\\b" + text + "\\b)", "gim"); 
    var e = document.getElementById("mydata").innerHTML; 
    var enew = e.replace(/(<span>|<\/span>)/igm, ""); 
    document.getElementById("mydata").innerHTML = enew; 
    var newe = enew.replace(query, "<span>$1</span>"); 
    document.getElementById("mydata").innerHTML = newe; 
}