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

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

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

1 个答案: