Jquery 文字高亮代码,JS代码库,德仔网

代码语言

代码分类

【JS】 Jquery 文字高亮

作者:文滔 / 发布于2014/11/3/ 834


	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
	<html xmlns="http://www.w3.org/1999/xhtml"> 
	<head> 
	 <title> jQuery文字高亮插件，使用简单，功能强大，支持FF/IE等主流浏览器 </title> 
	</head>
	<script type="text/javascript" src="http://xiaofeng1982.blog.163.com/blog/js/jquery.min.js"></script>
	<body> 
	源字符串：<input name="src" type="text" size="30" value="ABCDEFGHIJKLMNOPQISTUVWXYZ0123456789中华人民共和国" /> 
	搜索字符串：<input id="sea" name="search" type="text" size="30" /> 
	<div class="h">ABCDEFGHIJKLMNOPQISTUVWXYZ0123456789中华人民共和国</div> 
	<div class="h">ABCDEFG0123456789中华PQISTUVW人民HIJKLMNOXYZ共和国</div> 
	<div class="h">ABCDEFGHIJKLMNOPQI789中华人民STUVWXYZ0123456共和国</div> 
	<div class="h">ABCDKLMNOPQISTUVWXY9中EFGHIJ华人民Z012345678共和国</div> 
	<div class="h">ABCDEFGHUVWXYZ0123456789中华人IJKLMNOPQIST民共和国</div> 
	<div id="h">ABCDEFM89中华TUVWXYZ01人民NOPQIS23GHIJKL4567共和国</div> 
	<input type="button" value="高亮" /> 
	<script type="text/javascript" src="http://xiaofeng1982.blog.163.com/blog/jquery.js"></script> 
	<script type="text/javascript"> 
	$("input[type='button']").click(function(){ 
	 $(".h").highText($("#sea").val(), {color : "#F00", "font-size" : "150%"}); 
	}); 
	jQuery.fn.extend({ 
	 highText : function (searchWords, css) { 
	 return this.each(function(){ 
	 $(this).html(function high(replaced, search, css){ 
	 var pattarn = search.replace(/\b(\w+)\b/g, "($1)").replace(/\s+/g, "|"); 
	 return replaced.replace(new RegExp(pattarn, "ig"), function(keyword){ 
	 return $("<span>" + keyword + "</span>").css(css).outerHTML(); 
	 }); 
	 }($(this).text(), searchWords, css)); 
	 }); 
	 }, 
	 outerHTML : function(s) { 
	 return (s) ? this.before(s).remove() : jQuery("").append(this.eq(0).clone()).html(); 
	 } 
	}); 
	</script> 
	</body> 
	</html>

试试其它关键字

　文字高亮　

同语言下

可能有用的

文滔贡献的其它代码(10)