Question

我是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>

Answer 1

带有g 全球标志的

Regular expression会有所帮助：

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

DEMO： http://jsfiddle.net/guC4j/

Answer 2

一种选择是使用split和join，如下所示：

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

这是一个jsFiddle来玩。

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

2 个答案: