搜索结果关键字标红

sunonzj

发布于 2022-06-21 13:36:16

9890

发布于 2022-06-21 13:36:16

文章被收录于专栏：zjblogzjblog

对于搜索结果的关键字标红，写下我用的两种方法。

本程序是在jsp页面写的，不过都差不多，根据实际使用情况在改吧。

首先搜索关键字回显，从后台判断搜索条件是否为空，不为空就再传到前台，前台在判断是否有传过来。

<h2>搜索结果</h2>
	<hr>
	<c:choose>
		<c:when test="${title!=null }">
			<c:forEach items="${articleList }" var="list">
				<h2>
					<a href="" id="title${list.articleId }">${list.articleTitle }</a>
				</h2>
				<script type="text/javascript">
				    goto("${list.articleId }","${title}");
				</script>
			</c:forEach>
		</c:when>
		<c:otherwise>
			<c:forEach items="${articleList }" var="list">
			  <h2>
				<a href="" title="${list.articleTitle }">${list.articleTitle }</a>
			   </h2>
			</c:forEach>
		</c:otherwise>
	</c:choose>

<script type="text/javascript">
	function goto(articleId,nameVal){
		$('#title'+ articleId).html(function(i,oldHTML){
            return oldHTML.replace(eval("/"+nameVal+"/i"),'<font color="red">'+nameVal+'</font>');
        })
	}
</script>

注意：替换的js代码直接写在foreach中的话如果查出多条只会显示最后一条，因为前面的会被覆盖，写到外面通过方法来执行就不会了，还有个问题是替换的文字如果是因为会有大小写区分，之前用的是

replace(eval("/"+nameVal+"/g"),"")

改成i就会以你搜索文字为标准，你输入的是小写则都变小写，还有这个

eval()

是动态复制的写法，，之前一直不知道咋弄，写死要替换的文字就是

replace(/nameVal/g,"")

这样就直接替换nameVal几个字。

第二种方法用的是InnerHtml

var box = document.getElementById("name"+notesId);
var nameVal = "${noteName}";
var boxContent = box.innerHTML;
var findText = boxContent.split(nameVal);
box.innerHTML = findText.join('<font style="color:red;">'+nameVal+'</font>')

另外需要注意的是这种方法搜索单个字母，会有问题出现哦。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2019-03-12 ，如有侵权请联系 cloudcommunity@tencent.com 删除

jsp