JavaScript正则表达式加亮关键字(js全部替换)

JavaScript加亮原理――建立含有变量的正则表达式

通过JavaScript正则表达式来动态匹配查找页面指定区域的内容，在找出关键字之后替换成某个新的关键字。在替换后的关键字上添加字体颜色定义，即实现了关键字加亮。

实现过程

在JavaScript里我们很容易地建立一个正则表达式，其格式无非如此：

/expression/ 或 "expression"

其中，成对出现的正斜杠（/）或小角引号（"）作为边界符号，其内的表达式（expression）为正则表达式的具体内容。

通常，构造一个正则表达式，expression是具体的、已知的字串等东西，但是，实践中我们经常需要构造一个可以互动变化的表达式，也就是说，用于替换脚本的正则表达式是不确定的，由用户根据需要自行决定，而我们不可能在后台为用户的每一个选择建立一个独立的正则表达式，为此，构造一个可包含变量的正则表达式就必不可少。

在JavaScript里，构造一个可包含变量在内的正则表达式可用如下方式：

re = new RegExp(expression,rule);

不难看出，式子里，expression为正则表达式的构造内容，它不再受正斜杠和小角引号的限制，可以是一个变量；rule为规则，其值为i或g或gi，为i时只匹配一次，g和gi则为全局变量，遍历匹配。

例如，我们要将字串中的“苹果”全部变成“雪梨”，可如此实现：

str="苹果有大苹果小苹果之分"; //原字串
oldstr="苹果"; //待替换字串
newstr="雪梨"; //替换为字串
re=new RegExp(oldstr,"gi"); //建立正则表达式 - 全部替换
targetstr=str.replace(re,newstr); //替换后的字串
document.write("替换前: " + str + "<br>替换后: " + targetstr);

执行以上代码，效果如下：

替换前: 苹果有大苹果小苹果之分
替换后: 雪梨有大雪梨小雪梨之分

理解了以上原理，我们就可以在此基础上拓展我们关键字加亮的JavaScript代码了。

代码加亮示例

假设我们需要将文中正文部分所出现的“的”字全部变为红色。

1、首先，我们要创建一个正则表达式的匹配区域，这里我们在HTML页面中创建一个ID为"main"的DIV容器层（此区域就是我们要加亮某个关键字的内容区）。

<div id="main">匹配内容区</div>

2、接着我们创建一个JS函数并添加到HTML文档中，用于匹配和替换关键字：

function alter_text() {
   str=document.getElementById('main').innerHTML;//获取main区域中所有文字
   oldstr="的";//定义要加亮的字符串
   re=new RegExp(oldstr,'g');//创建含变量的正则表达式
   newstr="<span style='color:red'>" + oldstr + "</span>";//将关键字替换成newstr的形式
   targetstr=str.replace(re,newstr);//执行替换
   document.getElementById('main').innerHTML=targetstr;//重新输出替换后的内容
}

3、添加一个链接标签<a>用于触发alter_text函数：

<a href="#" onclick=javascript:alter_text()>点击此处加亮</a>

4、结果演示：点击此处加亮本文正文部分出现的“的”字。