做项目的时候，有这样的需求。显示客户信息后，我会搜索相关客户，显示所有相关客户信息。因为我把一个客户的所有信息都写在一个div里，所以显示的时候会显示整个div。我们先来看看达到的效果：

当我进入瓦窑村时，我会用瓦窑村显示相关的客户信息，并将瓦窑村的字体设置为红色，其他不显示；请看下面的html代码：

body div class=' bar bar-header-secondary ' style=' top :0 ' div class=' searchbar ' a class=' searchbar-cancel ' cancel/a div class=' search-input ' label class=' icon icon-search ' for=' search '/label input type=' text ' id=' txt search ' onChange=' txt search()' Placeholder='输入关键字./Div/Div/Div class=' content ' id=' Div main ' style=' top :2.2 em ' Div class=' card ' Div class=' card-header ' Div富民清泉假日有限公司/Div span 530124210342/span/Div class=' card-content ' Div class=' card-content-inner '客户经理：卢彦舟br负责人：张世成a href='电话：131311/div/body这里使用了onChange事件，可以根据个人需求进行更改；

样式类型='text/css '。changestyle { color:redfont-weight :600；}/style script type=' text/JavaScript '函数txtsearch () {//traverse移除b标记，并防止第二次搜索bug $()。change style’)。每个(函数(){var xx=$ (this))。html()；$(这个)。replace with(xx)；});//整个客户信息div var str=$('#divMain ')。html()；//文本输入框var txt=$('#txtSearch ')。val()；//不是null，如果($。装饰件(txt)！=' '){//定义b标签样式红色粗体var re=' b class=' change style ' ' txt ' '；//替换所有与搜索相关的内容。替换(新的regexp (txt，' gm ')，re)；//赋值//document . getelementbyid(' div main ')。innerhtml=nn$('#divMain ')。html(nn)；//显示div $('。卡片')。隐藏()。过滤器(' :包含(' txt ' ')')。show()；} else { $('。卡片')。show()；} }/脚本其实整体思路是这样的：

1.首先在html中查找要搜索的内容，并将其替换为b类=“change style”“search content”；changestyle中的样式是红色和粗体

2.显示包含整个内容$('的div。卡片')。隐藏()。过滤器(' :包含(' txt ' ')')。show()；卡片是整个div包含客户信息；

3.大家都知道这改变了原来div的结构，里面的spring文本变成了这样，如果第二次输入时整个div没有恢复到加载页面，那么搜索就会产生bug

显然，还有两个B标签。如果不遍历去掉B标签，我搜瓦窑村，搜村委会。好了

不会显红；

4.个人学到的关键技术：去掉标签，替换所有相关的文本替换方法，显示需要的div (filter)过滤方法！

总结：里面遇到的问题很多。在网上查了很多资料，总是纸上谈兵，总会冒出不同的想法，不同的思路去解决不同的bugs这是很基本的，只要你有想法和想法，你就会去做。没有百度，一个一个来。随着时间慢慢前进！

摘要

以上是边肖介绍给大家的前端html。jQuery实现了文本的搜索功能，并显示搜索相关内容，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！