生活不易、且行且珍惜。网站首页 程序人生
搜索结果关键字标红
发布时间:2019-03-12 10:38编辑:zj 阅读:文章分类:
开发互动QQ群:170915747
对于搜索结果的关键字标红,写下我用的两种方法。
本程序是在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>')
另外需要注意的是这种方法搜索单个字母,会有问题出现哦。
#去评论一下
标签:#JS
版权声明:本博客的所有原创内容皆为作品作者所有
转载请注明:来自ZJBLOG 链接:www.zjhuiwan.cn


「万物皆有时,比如你我相遇」
感谢大佬打赏【请选择支付宝或微信,再选择金额】
使用微信扫描二维码完成支付
