JQuery 高亮显示文本

最新推荐文章于 2021-11-23 19:23:28 发布

yyueshen

最新推荐文章于 2021-11-23 19:23:28 发布

阅读量886

点赞数

分类专栏： JQuery 文章标签： jquery function google generator xhtml 网络

本文链接：https://blog.youkuaiyun.com/yyueshen/article/details/6599971

版权

JQuery 专栏收录该内容

3 篇文章

订阅专栏

博客介绍了如何利用JQuery实现文本高亮显示，通过将多个关键字转化为字符串数组，逐个进行高亮处理。文中提供了具体的插件使用示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近做一个搜索的功能，需要用到高亮关键字，于是在网上找到一段代码

http://www.css88.com/archives/2484

这个是原作者链接

(function($){
  $.fn.highLight = function(str) {
    if(str == undefined || str ==" ") {
		return this.find("span.highlight").each(function() {
		  this.parentNode.firstChild.nodeName;
		  with (this.parentNode) {
		  	replaceChild(this.firstChild, this);
		  	normalize();
		  }
		}).end();
    } else {
      $(this).each(function(){
        elt = $(this).get(0);
        elt.normalize();
        $.each($.makeArray(elt.childNodes), function(i, node){
          if(node.nodeType == 3) {
            var searchnode = node;
			var pos = searchnode.data.indexOf(str);
            if(pos >= 0) {//æŸ¥æ‰¾
              var spannode = document.createElement('span');
              spannode.className = 'highlight';
              var middlebit = searchnode.splitText(pos);
              var searchnode = middlebit.splitText(str.length);
              var middleclone = middlebit.cloneNode(true);
              spannode.appendChild(middleclone);
              searchnode.parentNode.replaceChild(spannode, middlebit);
            }
          } else {
            $(node).highLight(str);
          }
        })
      })
    }
    return $(this);
  }
})(jQuery);

后来我发现在每一段文本里面，该算法只能替换一次关键字，也就是说，在一段文本里有两个以上需要高亮显示的关键字，只能第一个被高亮，于是我做了一下修改，使其可以高亮多个关键字

(function($)
{
	$.fn.highLight = function(str)
	{
		if (str == undefined || str == " ")
		{
			return this.find("span.highlight").each(function()
			{
				this.parentNode.firstChild.nodeName;
				with (this.parentNode)
				{
					replaceChild(this.firstChild, this);
					normalize();
				}
			}).end();
		}
		else
		{

			$(this).each(function()
			{
				elt = $(this).get(0);
				elt.normalize();
				$.each($.makeArray(elt.childNodes), function(i, node)
				{
					if (node.nodeType == 3)
					{


						var searchnode = node;

						var pos = searchnode.data.toUpperCase().indexOf(str.toUpperCase());

						while (pos < searchnode.data.length)
						{

							if (pos >= 0)
							{
								var spannode = document.createElement('span');
								spannode.className = 'keyword';
								var middlebit = searchnode.splitText(pos);
								var searchnode = middlebit.splitText(str.length);
								var middleclone = middlebit.cloneNode(true);
								spannode.appendChild(middleclone);
								searchnode.parentNode.replaceChild(spannode, middlebit);
							}
							else
							{
								break;
							}

							pos = searchnode.data.toUpperCase().indexOf(str.toUpperCase());
						}

					}
					else
					{
						$(node).highLight(str);
					}
				})
			})
		}
		return $(this);
	}
})(jQuery);

但这个时候还有一个问题，就是如果我们有多个关键字需要高亮怎么办？我一开始是在上面的函数里面做循环，但由于闭包的问题，我没有解决，失败了。

我目前的办法是，先把多关键字做成字符串数组，然后循环数组，分别对各个关键字进行高亮。

最后给一段使用此插件的示例代码

<!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> new document </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <style type="text/css">
		.keyword
		{
		color: red;
		background-color: yellow;
		}
	</style>
  <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
	<script src="jquery.highlight.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(document).ready(function()
		{
			$('#searchresponse').highLight();
			$('#searchresponse').highLight("Google");
		});

	</script>
 </head>

 <body>
	<Div id="searchresponse">
		北京时间7月11日早间消息，在谷歌6月28日推出社交网络服务Google+的一周之后，谷歌的市值一度上升206亿美元。
	<br/>
不过，摩根士丹利上周五下调了谷歌的评级，并指出谷歌可能无法通过Google+获益，导致谷歌股价下跌。目前谷歌市值较Google+推出之前仍高158亿美元。
<br/>
6月27日，谷歌的收盘价为482.80美元，而7月7日为546.60美元。以3.2225亿股流通股计算，这意味着谷歌的市值增加了206亿美元。不过到周五收盘时，谷歌股价又下跌至532美元。
<br/>
其他一些因素也对谷歌股价造成影响，例如谷歌核心搜索业务的表现，以及市场整体表现等。不过过去一周中，对谷歌来说最重要的事件就是社交网络服务的推出。尽管Google+仍在有限的测试中，市场已经对该服务做出积极反应。
<br/>
如果谷歌CEO拉里·佩奇(Larry Page)能够通过社交网络使谷歌受益，那么摩根士丹利届时将会上调谷歌的评级。这将再次推动谷歌的市值增长。
<br/>
	</div>
 </body>
</html>