仅突出显示“搜索”中的第一个字符串

highlighting only the First string in Search

本文关键字：第一个 字符串 搜索 显示      更新时间：2023-09-26

我是JavaScript新手。我的javascript代码出现问题。我正在尝试使用字符串替换方法来突出显示搜索到的文本。但是我的函数只突出显示它找到的第一个字符串，而不突出显示其他字符串！！如何修复它以查找我在搜索中键入的所有字符串。这是我的代码：

<html>
<head>
    <script language="javascript">
    function search()
    {
        var s = document.getElementById("p1").innerHTML
        document.getElementById("p1").innerHTML = s.replace(document.getElementById('txt').value , '<span style="color:red">'+document.getElementById("txt").value+'</span>')
    }
    </script>
</head>
<body>
    <input type="text" id="txt" value="search..." onfocus="value=''" />
    <input type="button" id="btn" value="search" onclick="search()"/>
    <p id="p1">
        Type any word from this paragraph in the box above, then click the "Search" button to highlight it red      
    </p>

</body>

带有g全局标志的正则表达式将有所帮助： 
function search() {
    var p1 = document.getElementById("p1"),
        value = document.getElementById("txt").value,
        regex = new RegExp("''b" + value + "''b", "gi"),
        rwith = '<span style="color: red;">$&</span>';
    p1.innerHTML = p1.innerHTML.replace(regex, rwith);
}

演示：http://jsfiddle.net/guC4j/

一个选项是使用split和join，如下所示：

document.getElementById("p1").innerHTML = s.split(document.getElementById('txt').value).join('<span style="color:red">'+document.getElementById("txt").value+'</span>');

这是一个可以玩的jsFiddle。

相关文章：