用JS让文章内容指定的关键字加亮

 

单关键词：

<div id="txt">
用JS让文章内容指定的关键字加亮

 

小楼昨夜又春风，云雨巫山数落红。

花径不曾缘客扫，蓬门今次为君开。

</div>
<script language="JavaScript">

txt.innerHTML = txt.innerHTML.replace(/文章/gi,"<font color=red>文章</font>");

</script>

 

多关键词：

 

<div id="txt">
用JS让文章内容指定的关键字加亮

舍南舍北皆春水，但见群鸥日日来。

花径不曾缘客扫，蓬门今始为君开。

盘餐市远无兼味，樽酒家贫只旧醅。

肯与邻翁相对饮，隔篱呼取尽余杯。

</div>
<script language="JavaScript">

txt.innerHTML = txt.innerHTML.replace(/(文章)|(日)|(花)/gi,"<font color=red>$1$2$3</font>"); 

</script>

关于Code的说明：

 

字符 含义
$$ $ （JScript 5.5 或更新版本）
$& 指定与整个模式匹配的 stringObj 的部分。 （JScript 5.5 或更新版本）
$` 指定由 $& 描述的匹配之前的 stringObj 部分。 （JScript 5.5 或更新版本）
$' 指定由 $& 描述的匹配之后的 stringObj 部分。 （JScript 5.5 或更新版本）
$n 捕获的第 n 个子匹配，此处 n 为从1到9的十进制一位数。 （JScript 5.5 或更新版本）
$nn 捕获的第 nn 个子匹配，此处 nn 为从01到99的十进制两位数。 （JScript 5.5 或更新版本）
g，全局模式匹配
i，不区分大小写匹配

 

从文本入手，改变文字的颜色：

<pre>
用JS让文章内容指定的关键字加亮

事了拂衣去，深藏功与名。

谁能书阁下，白首太玄经。

</pre>

 

<script language="JavaScript">
function highlight(key)
{
var key = key.split('|');
for (var i=0; i<key.length; i++)
{
var rng = document.body.createTextRange();
while (rng.findText(key[i]))
rng.pasteHTML(rng.text.fontcolor('red'));
}
}
highlight('文章|下|白首'')
</script>