突出顯示搜索中只有第一個字符串

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

來源

2013-02-08 Peyman Omidi

一種選擇是使用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-08 22:14:33

Regular expression與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); 
}

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

來源

2013-02-08 22:14:12 VisioN

比我寫的要好得多。 +1 – Achrome 2013-02-08 22:18:35

@AshwinMukhija TBH，你的實現將不會真的工作=） – VisioN 2013-02-08 22:19:21

有沒有一種方法可以輕鬆地轉義'價值'，如果搜索字符串包含的東西，可以通過正則表達式解釋它會被忽略？我可以看到另一方面，因爲這可以讓你建立正則表達式搜索，這很酷。 :) – 2013-02-08 22:23:40

突出顯示搜索中只有第一個字符串

回答

相關問題