2012-07-28 56 views
1

我想將樣式(藍色字體)應用於可能具有多個單詞的特定字符串中的匹配單詞。這個字符串可以重複同樣的單詞。需要關於通過Javascript代碼應用樣式的幫助

例: 字符串段=「這是將針對子進行匹配的字符串匹配的子串可以是單個單詞或multple單詞組成字符串。」

字符串matchingString =「串字」

現在我想將藍色粗體樣式應用於段落串中的字符串和單詞的匹配單詞。

你能幫我解決如何做到這一點的JavaScript?

高級謝謝 Robert。

+1

的「字符串paragra ph文本「沒有匹配的」字符串「。無論如何,只需用' word'替換'word'即可。看看:http://www.w3schools.com/jsref/jsref_replace.asp – 2012-07-28 12:51:37

回答

1

假設:

<div id="myDiv">This is the string which will be matched against substring. The matching substring can be a single word or multple words composed string.</div> 

.some-class{ 
    color: blue; 
    font-weight: bold; 
} 

那麼你可以做這樣的替換詞:上

var elem = document.getElementById('myDiv'); 
var phrase = 'string word'; 
var regex = new RegExp(phrase.split(' ').join('|'),"gi"); 
//result => /string|word/g 
elem.innerHTML = elem.innerHTML.replace(regex,'<span class="some-class">$&</span>'); 

Live demo

+0

通過在正則表達式中添加i,此功能完美適用於區分大小寫。非常感謝你Engineeeeeeeeer ... :) – Robo 2012-07-28 14:21:38

+0

@Robo你還沒有提及任何關於區分大小寫的問題,所以我沒有提供'i'國旗的答案。但是我已經添加了'i',並且可能[接受]( http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work)我的答案。 – Engineer 2012-07-28 14:45:43

+0

嗨工程師,在上面的解決方案的頂部需要一個更多的青睞...如果我給var語句='字符串'(我給了字之間額外的空間)。在這個詞沒有得到匹配之後。你會分享任何想法嗎? – Robo 2012-07-30 07:00:39

0
var text = "This is the string which will be matched against substring..."; 
var search = "string word"; 

var words = search.split(" "); 
for (var i = 0; i < words.length; ++i) { 
    text = text.replace(words[i], "<span style='color: blue;'>"+words[i]+"</span>"); 
} 

document.write(text); 

測試在這裏:http://jsfiddle.net/Zh6t9/

+0

你會提供一個想法來匹配子字符串中的字符串?並且不區分大小寫。 – Robo 2012-07-28 14:12:09

+0

如果你想不區分大小寫的子串匹配,@工程師的解決方案是正確的方式去...;)只需在正則表達式中用「gi」替換「g」。 – Aletheios 2012-07-28 14:17:17

+0

再次,如果我在段落字符串中添加樣式,它就像下面的 – Robo 2012-07-28 14:17:44