JavaScript简单实现关键字文本搜索高亮显示功能示例


Posted in Javascript onJuly 25, 2018

本文实例讲述了JavaScript简单实现关键字文本搜索高亮显示功能。分享给大家供大家参考,具体如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3water.com JS关键字文本高亮</title>
</head>
  <body>
    <div id="content">
      前端通常是指网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发,前端设计一般可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,现在最新的高级版本HTML5、CSS3,以及SVG等。
      HTML、CSS、JavaScript是前端开发中最基本也是最必须的三个技能。前端的开发中,在页面的布局时, HTML将元素进行定义,CSS对展示的元素进行定位,再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单,但这里面需要掌握的东西绝对不会少。在进行开发前,需要对这些概念弄清楚、弄明白,这样在开发的过程中才会得心应手。
    </div>
    <input type="text" id="text" placeholder="请输入关键字"/>
    <input type="button" id="button" value="确定"/>
    <script>
       var content = document.getElementById("content");
       var contents = content.innerHTML;
       var text = document.getElementById("text");
       var button = document.getElementById("button");
       button.onclick = function() {
         var value = text.value;
         var values = contents.split(value);
         content.innerHTML = values.join('<span style="background:red;">' + value + '</span>');
       };
    </script>
  </body>
</html>

使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun,测试运行结果如下:

JavaScript简单实现关键字文本搜索高亮显示功能示例

另:此处是采用button按钮点击实现的搜索高亮显示,小编在此基础上稍作修改,给出一个实时显示文本搜索的例子:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3water.com JS关键字文本高亮</title>
</head>
  <body>
    <div id="content">
      前端通常是指网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发,前端设计一般可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,现在最新的高级版本HTML5、CSS3,以及SVG等。
      HTML、CSS、JavaScript是前端开发中最基本也是最必须的三个技能。前端的开发中,在页面的布局时, HTML将元素进行定义,CSS对展示的元素进行定位,再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单,但这里面需要掌握的东西绝对不会少。在进行开发前,需要对这些概念弄清楚、弄明白,这样在开发的过程中才会得心应手。
    </div>
    <input type="text" id="text" placeholder="请输入关键字"/>
    <script>
       var content = document.getElementById("content");
       var contents = content.innerHTML;
       var text = document.getElementById("text");
       text.onkeyup= function() {
         var value = text.value;
         var values = contents.split(value);
         content.innerHTML = values.join('<span style="background:red;">' + value + '</span>');
       };
    </script>
  </body>
</html>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试一下运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
Jun 25 Javascript
getElementByIdx_x js自定义getElementById函数
Jan 24 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
Dec 28 Javascript
Javascript核心读书有感之语言核心
Feb 01 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
Jan 27 Javascript
jQuery中map函数的两种方式
Apr 07 jQuery
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
Apr 26 Javascript
Vue.js仿微信聊天窗口展示组件功能
Aug 11 Javascript
Vue.js实现开发购物车功能的方法详解
Feb 22 Javascript
一文快速详解前端框架 Vue 最强大的功能
May 21 Javascript
Vue数字输入框组件的使用方法
Oct 19 Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
Jul 25 #Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
Jul 25 #Javascript
Vue与Node.js通过socket.io通信的示例代码
Jul 25 #Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 #jQuery
详解Vue源码学习之callHook钩子函数
Jul 25 #Javascript
详解操作虚拟dom模拟react视图渲染
Jul 25 #Javascript
浅析JS中回调函数及用法
Jul 25 #Javascript
You might like
现磨咖啡骗局!现磨咖啡=新鲜咖啡?现磨咖啡背后的猫腻你不懂!
2019/03/28 冲泡冲煮
PHP运行时强制显示出错信息的代码
2011/04/20 PHP
php 搜索框提示(自动完成)实例代码
2012/02/05 PHP
对象失去焦点时自己动提交数据的实现代码
2012/11/06 PHP
基于jQuery替换table中的内容并显示进度条的代码
2011/08/02 Javascript
火狐textarea输入法的bug的触发及解决
2013/07/24 Javascript
jquery eval解析JSON中的注意点介绍
2013/08/23 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
2015/08/11 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
2015/10/19 Javascript
使用NodeJs 开发微信公众号(三)微信事件交互实例
2016/03/02 NodeJs
Node.js模块封装及使用方法
2016/03/06 Javascript
jquery通过name属性取值的简单实现方法
2016/06/20 Javascript
js代码实现下拉菜单【推荐】
2016/12/15 Javascript
JS触摸与手势事件详解
2017/05/09 Javascript
JS实现的加减乘除四则运算计算器示例
2017/08/09 Javascript
bootstrap中的导航条实例代码详解
2019/05/20 Javascript
微信小程序文章列表功能完整实例
2020/06/03 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
2020/07/24 Javascript
Javascript前端下载后台传来的文件流代码实例
2020/08/18 Javascript
python3实现TCP协议的简单服务器和客户端案例(分享)
2017/06/14 Python
python中安装Scrapy模块依赖包汇总
2017/07/02 Python
Python数据分析matplotlib设置多个子图的间距方法
2018/08/03 Python
对python中list的拷贝与numpy的array的拷贝详解
2019/01/29 Python
浅析Windows 嵌入python解释器的过程
2019/07/26 Python
Python enumerate() 函数如何实现索引功能
2020/06/29 Python
Pycharm及python安装详细教程(图解)
2020/07/31 Python
HTML5仿微信聊天界面、微信朋友圈实例代码
2018/01/29 HTML / CSS
Cecil Mode法国在线商店:女性时尚
2021/01/08 全球购物
办理居住证介绍信
2014/01/15 职场文书
会计与出纳自荐书范文
2014/03/16 职场文书
行政监察建议书
2014/05/19 职场文书
幼儿园感恩节活动方案2014
2014/10/11 职场文书
公司联欢会主持词
2015/07/04 职场文书
毕业季聚会祝酒词!
2019/07/04 职场文书
MySQL快速插入一亿测试数据
2021/06/23 MySQL
python神经网络ResNet50模型
2022/05/06 Python