2012-07-28 59 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