javascript正则表达式校验匹配搜索的关键字/实现关键字替换加粗变色功能(借用了replace方法)

核心代码如下:

var str = "使用正则表达式把关键字替换加粗,文字加粗";
var word = "加粗";
str = str.replace(new RegExp("(" + word + ")","ig"), "<strong>" + word + "</strong>");
document.write(str);

解释:

其实很简单的,分为3步;

1、设置好,匹配所在的区域(在哪里进行海选)和关键字

2、写一个正则,匹配好关键字(全文)

3、利用字符串的replace方法进行替换;

如果您需要变色的话;就是替换的时候,直接加上颜色就可以了;

如下:

str = str.replace(new RegExp("(" + word + ")","ig"), "<strong style='color: red;'>" + word + "</strong>");

在segmentfault上看到一篇很不错的 文章,大概内容:

需求是:

用正则表达式获取一段代码字符串中的“var”关键字,但必须保证“var”不是被包含在字符串或者注释中的。例如:
var a = 10; (这句话中要获取 var)
/* var a = 20 */ (这句话中不会获取var,因为这是注释内容,var不被看作关键字)
b = ‘var a’; (这句话也不会获取var,因为var被看作字符串,不是关键字)

可以写的正则是:

"var a = 10; /* var a = 20 */ b = 'var a';".replace(/\/\*.+\*\//g, '').replace(/(['"]).+\1/g, '').match(/var.+?;/g)

或者

var s = 'var a = "/*"; var b = "a"; var c = "*/"; /* " */ var d = "\\\"";', m;
while(m = r.exec(s)){
    m[1] && console.log(m);
}

还有一个很常见的用法,就是给匹配的关键词加上链接;

很多流量站经常用到;如下

s = "<a href='http://www.yx129.com/bingli/1_310.html'>先看一个糖尿病病历</a> <br/>" +
"<IMG style='vertical-align:middle' width=40 src='http://yx129.com/api/minisite/images/skin/green/doctor_thumb_100.png'/>糖尿病王医生<br/>" +
"糖尿病简介<br/>糖尿病发病率<br/><a href='baidu.com'>糖尿病症状<br/>" +
"</a> ";
document.write(s);

a_reg = /<a(.*?)<\/a>/i; //a链接的正则
img_reg = /<img(.*?)>/i; //图片链接的正则,防止图片的title,alt什么的属性包括疾病名而误替换
var ix = 0;

var arr_ele = [];
//先把<a><img>2类标签全部替换为{{index}},然后处理剩下的文字,再把<a><img>标签的内容替换回去
while(true){
if(-1 == s.toLowerCase().indexOf('<a ') && -1 == s.toLowerCase().indexOf('<img ')){
break;
}
a_match = s.match(a_reg);
if(a_match){
//console.log(a_match);
arr_ele.push(a_match[0]);
s = s.replace(a_reg, '{{' +ix+ '}}');
ix++;
}
img_match = s.match(img_reg);
if(img_match){
//console.log(img_match);
arr_ele.push(img_match[0]);
s = s.replace(img_reg, '{{' +ix+ '}}');
ix++;
}
console.log(s);
}

document.write('<br>-------------------------<br>第1步:把链接替换为{{index}}后:<br>'+s+'<br>');

s = s.replace(/糖尿病/i, "<a target='_blank' href='http://jibing.yx129.com/tnb'>糖尿病</a>");

document.write('<br>-------------------------<br>第2步:添加疾病库链接后:<br>'+s+'<br>');
if(arr_ele){
for(var i=0; i<arr_ele.length; i++){
s = s.replace('{{' + i + '}}', arr_ele[i]);
}
}
document.write('<br>-------------------------<br>第3步:把链接替换回去之后:<br>'+s+'<br>');

下面是一个网页搜索的,高亮例子;

背后的原理非常清晰;可以拷贝到您的编辑器上进行测试;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<META name="Author" content="Sheneyan" />
<script type="text/javascript">
function encode(s){
return s.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/([\\\.\*\[\]\(\)\$\^])/g,"\\$1");
}
function decode(s){
return s.replace(/\\([\\\.\*\[\]\(\)\$\^])/g,"$1").replace(/>/g,">").replace(/</g,"<").replace(/&/g,"&");
}
function highlight(s){
if (s.length==0){
alert('搜索关键词未填写!');
return false;
}
s=encode(s);
var obj=document.getElementsByTagName("body")[0];
var t=obj.innerHTML.replace(/<span\s+class=.?highlight.?>([^<>]*)<\/span>/gi,"$1");
obj.innerHTML=t;
var cnt=loopSearch(s,obj);
t=obj.innerHTML
var r=/{searchHL}(({(?!\/searchHL})|[^{])*){\/searchHL}/g
t=t.replace(r,"<span class='highlight'>$1</span>");
obj.innerHTML=t;
alert("搜索到关键词"+cnt+"处")
}
function loopSearch(s,obj){
var cnt=0;
if (obj.nodeType==3){
cnt=replace(s,obj);
return cnt;
}
for (var i=0,c;c=obj.childNodes[i];i++){
if (!c.className||c.className!="highlight")
cnt+=loopSearch(s,c);
}
return cnt;
}
function replace(s,dest){
var r=new RegExp(s,"g");
var tm=null;
var t=dest.nodeValue;
var cnt=0;
if (tm=t.match(r)){
cnt=tm.length;
t=t.replace(r,"{searchHL}"+decode(s)+"{/searchHL}")
dest.nodeValue=t;
}
return cnt;
}
</script>
<style type="text/css">
.highlight{background:green;font-weight:bold;color:white;}
</style>
</head>
<body>
<form onsubmit="highlight(this.s.value);return false;">
<p><input name="s" id="s" title="搜索内容:"/><input type="submit" value="搜索"/></p>
</form>
<div id="content">
测试高亮的代码。很长很长的代码……………………
</div>
</body>
</html>

~~~

未经允许不得转载:WEB前端开发 » javascript正则表达式校验匹配搜索的关键字/实现关键字替换加粗变色功能(借用了replace方法)

赞 (1)