一、页面效果展示

二、代码实现

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- 输入框 --><input type="text" id="my_input"/><!-- 按钮 --><button id="my_btn">搜索</button><!-- 文本内容 --><p id="my_p">噫，吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨嵋巅。地崩山摧壮士死，然后天梯石栈方钩连。上有六龙回日之高标，下有冲波逆折之回川。黄鹤之飞尚不得过，猿猱欲度愁攀援。青泥何盘盘，百步九折萦岩峦。扪参历井仰胁息，以手抚膺坐长叹。问君西游何时还？畏途巉岩不可攀。但见悲鸟号古木，雄飞从雌绕林间。又闻子规啼夜月，愁空山。蜀道之难，难于上青天，使人听此凋朱颜。连峰去天不盈尺，枯松倒挂倚绝壁。飞湍瀑流争喧豗，砯崖转石万壑雷。其险也若此，嗟尔远道之人，胡为乎来哉。剑阁峥嵘而崔嵬，一夫当关，万夫莫开。所守或匪亲，化为狼与豺。朝避猛虎，夕避长蛇，磨牙吮血，杀人如麻。锦城虽云乐，不如早还家。蜀道之难，难于上青天，侧身西望长咨嗟。</p></body><script>// 获取对象var my_input = document.getElementById("my_input");var my_btn = document.getElementById("my_btn");var my_p = document.getElementById("my_p");my_btn.onclick = function() {// 重置为不含标签的文本，清除上一次查找的标注my_p.innerHTML = my_p.innerText;// 获取输入框中的内容，即要查找的内容var content = my_input.value;if (content) {// 使用正则表达式全局查找 contentvar regex = new RegExp(content, 'g');// 将标注的内容替换到查到到的原内容var newP = "<span style='background: yellow;'>" + content + "</span>";my_p.innerHTML = my_p.innerHTML.replace(regex, newP)}}</script>
</html>

【前端小实战】页面文字搜索功能相关推荐

微信小程序最全搜索功能
微信小程序最全搜索功能主要功能: 搜索点击x号清空输入框内容点击取消返回上一页面搜索数据为空提示历史记录清空历史记录点击历史记录搜索点击搜索列表带参数返回上一页面代码如下: < ...
微信小程序开发实现搜索功能
对于搜索都是会有一些需要的,所以搜索页面还是可以复用的.主页面就是下面这样: 这个页面在pages/components/component2/component2.wxml 点击页面中黄色的inp ...
jQuery 动态文字搜索功能
先简单讲一下需求:页面中会列出多行个人信息记录,为方便查找,在顶层增加一个搜索栏,可根据用户姓名查找记录. 如果只想查看代码,可跳过分析过程,文章底部提供了完整的代码. 以下是我的编写过程: 动态页面 ...
微信小程序组件 —— 带搜索功能的选择器
微信小程序组件 -- 带搜索功能的选择器效果组件 search-picker 文件 wxml 文件: <view class="search-picker">< ...
html页面查找搜索功能代码
html页面查找搜索功能代码 html查找功能 <input type="button" οnclick="javascript:search()"val ...
php 微信公众号跳转小程序,微信小程序页面跳转功能
本文主要介绍微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法,结合具体实例形式总结分析了微信小程序页面跳转及列表item项跳转页面的相关操作技巧,需要的朋友可以参考下. 一.效果图从 ...
前端页面的搜索功能的实现
<input type="text" id="campus" class="layui-input" onkeyup="ck ...
小程序-实现列表- 搜索功能的实现（6）
list.wxml引入搜索文件  <include src="/includes/search-bar.wxml"/> 搜索文件 ...
微信小程序页面内搜索查询（无后台）
先上图,这是我要实现的效果! 当我们没有页面内没有分页又需要搜索时,我们可以直接在前端写搜索功能,这样也极大的减轻了后台查询压力. 这里实现原理用的是indexOf(string):查询字符串是否包含 ...

【前端小实战】页面文字搜索功能

文章目录

一、页面效果展示

二、代码实现

【前端小实战】页面文字搜索功能相关推荐

最新文章

热门文章