用生僻字实现双字词高亮显示

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>test.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="jquery.js" type="text/javascript"></script>
  
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var formerly =""; 
function highlight(){
	qx("span");
	formerly = $("span").html();
	var str = document.getElementById("search").value;
	var colors = ['red','yellow'];
	var s= new Array();
	s = str.split(',');
	if(s.length>0){
		if(s[0]!=''&&s[1]!=''){
	    	_hightLight('span', s[0], s[1], colors);
	    }
    } 
}
		
function _hightLight(elem, key01, key02, color) {
	$(elem).each(function(i){
		var h = $(elem).html();
		h = replaceAll(h,key01, "龖");
		h = replaceAll(h,key02, "龘");
		var temp01 = replaceAll(h,"龖", "<font style='background-color: "+color[0]+"'>" + key01 + "</font>");
		var temp02 = replaceAll(temp01,"龘", "<font style='background-color: "+color[1]+"'>" + key02 + "</font>");
		$(elem).html(temp02);
	}
	);
}
function qx(elem){
	if(!formerly==""){
		$(elem).html(formerly);
	}
}
/**
 * @author liangjian
 * @name replaceAll JS用于替换一个字符串中对应的所有的字符串
 * @param String  initStr 原字符串。
 * @param String  rstr  要转化的字符串。
 * @param String  rs  转换成的字符串
 * @return String str;
 */

function replaceAll(initStr,rstr,rs)
{ 
  str='';
  while(initStr.indexOf(rstr)!=-1) 
  {
   k=initStr.indexOf(rstr);
   initStr=initStr.replace(rstr,rs);
   str+=initStr.substr(0,k+rs.length);
   initStr=initStr.substr(k+rs.length);
  }
  str+=initStr;
 return str;
}

</script>
   
  </head>
  
  <body>
   <input type="text" name="search" id="search" />
   <button οnclick="highlight()">高亮</button><br/>
   <button οnclick="qx('span')">取消</button><br/>

   
<span >
<p>
梁健测试一下。。
</p>

cssrain jquery demo.高亮
我的love--jQuery.
 jquery demo.
我的love--jQuery. 高亮 高亮
cssrain jquery demo.

我的love--jQuery. 
cssrain jquery demo.
我的love--jQuery cssrain jquery demo.我的love--jQuery. cssrain jquery demo.我的love--jQuery. 
555
</span>




  </body>
</html>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值