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

Question

我正在尝试使用 javascript 在 html 文档中实现查找和替换文本。替换部分工作正常。但我想突出显示将在 html 文档中替换的文本（就像我们使用 ctrl + f 时在 chrome 中一样）。到目前为止，我的代码是

<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 事件并调用了函数 highlight()

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 事件之后，输入字段的值被清除。请帮助

Answer 1

编辑

搜索

脚本

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