日期:2014-05-16  浏览次数:20441 次

一个页面查找和标注JS代码分析?
在网上找到一段JS查找的代码,原代码如下:
<script type="text/javascript">
function encode(s){
return s.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/([\\\.\*\[\]\(\)\$\^])/g,"\\$1");
}
function decode(s){
return s.replace(/\\([\\\.\*\[\]\(\)\$\^])/g,"$1").replace(/&gt;/g,">").replace(/&lt;/g,"<").replace(/&amp;/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>

请问: var t=obj.innerHTML.replace(/<span\s+class=.?highlight.?>([^<>]*)<\/span>/gi,"$1"); 中,这个(/<span\s+class=.?highlight.?>([^<>]*)<\/span>/gi是什么含义?
decode和decode这两个函数中的正则表达式的如何理解?

------解决方案--------------------
/ <span\s+class=.?highlight.?>([^ <>]*) <\/span>/gi

也就是将字符串中的所有的<span class=highlight> show something </span> 替换成 show something

并且在替换的时候不区分大小写
------解决方案--------------------
/ <span\s+class=.?highlight.?>([^ <>]*) <\/span>/gi
js正则使用 /你的正则/ 这种语法,gi 是选项,说明不区分大小写
这句正则是用于匹配
<span一个或多个空格字符class=零个或一个任意字符highlight零个或一个任意字符>零个或多个不等于<和>的字符</span>

括号用于暂存匹配到的项,这里即为“零个或多个不等于<和>的字符”在后面用 $1 引用