-1

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>

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

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 に答える