-1

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

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

4

2 回答 2

4

带有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/

于 2013-02-08T22:14:12.957 回答
1

一种选择是使用split，join就像这样：

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

这是一个可以玩的jsFiddle 。

于 2013-02-08T22:14:33.880 回答