我试图找到一种方法来突出显示HTML中的一些文本。给出了以下HTML:
<div>This text contains matching words like word1 and word2 and xyzword1xyz and word2xyz and xyzword2</div>
应该用<span>
包围的单词列表是:
var array = ['word1','word2', 'word1word3'];
我当前的Javascript:
$.each(array , function(index, elem){
if(elem.length<3 || elem === "pan" || elem === "spa" || elem === "span")return true;
var re = new RegExp(""+elem+"(?=([^']*'[^']*')*[^']*$)","gi");
returnString = returnString.replace(re, "<span class='markedString colorword1orword2'>$&</span>");
});
得到的div看起来像:
<div>This text contains matching words like <span class='markedString colorword1orword2'>word1</span> and <span class='markedString colorword1orword2'>word2</span> and xyz<span class='markedString colorword1orword2'>word1</span>xyz and <span class='markedString colorword1orword2'>word2</span>xyz and xyz<span class='markedString colorword1orword2'>word2</span> and finally <span class='markedString colorword1orword2'><span class='markedString colorword1orword2'>word1</span>word3</span></div>
由于当前的regexp,class='markedString colorword1orword2'
中的所有内容都不匹配。
问题:如果阵列看起来像
var array = ['word1','word2', 'class'];
我最终会选择
<div>This text contains matching words like <span <span class='markedString colorword1orword2'>class</span>='markedString colorword1orword2'>word1</span> and <span <span class='markedString colorword1orword2'>class</span>='markedString colorword1orword2'>word2</span> and xyz<span <span class='markedString colorword1orword2'>class</span>='markedString colorword1orword2'>word1</span>xyz and <span <span class='markedString colorword1orword2'>class</span>='markedString colorword1orword2'>word2</span>xyz and xyz<span <span class='markedString colorword1orword2'>class</span>='markedString colorword1orword2'>word2</span> and finally <span <span class='markedString colorword1orword2'>class</span>='markedString colorword1orword2'><span <span class='markedString colorword1orword2'>class</span>='markedString colorword1orword2'>word1</span>word3</span></div>
这个例子是以某种方式构建的,所以HTML标签本身可能存在其他单词。
我需要一种模拟regexp查找的方法,这样我就可以制定一个规则,比如:
匹配不在
<span
和>
之间但允许级联的所有内容<span>adsa<span>asdsa</span></span>
等匹配
任何regexp大师都知道如何归档吗?
您可以尝试这样的操作(无循环):
var $div = $('#the_id_of_ the_div'),
array = ['word1','word2', 'word1word3'],
re = new RegExp(array.join('|'), 'gi'),
divHTML = $div.text().replace(re, "<span class='markedString colorword1orword2'>$&</span>");
$div.html(divHTML);
这只是一个例子,您可能会从文章片段外的某个jQuery对象中获得div
。
编辑
如果你在包装器中有一堆div
,你可以这样做:
var array = ['word1','word2', 'word1word3'],
re = new RegExp(array.join('|'), 'gi');
$('#wrapper div').each(function () {
var divHTML = $(this).text().replace(re, "<span class='markedString colorword1orword2'>$&</span>");
$(this).html(divHTML);
return;
});
jsFiddle的现场演示。