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 相关文章推荐
setInterval 和 setTimeout会产生内存溢出
Feb 15 Javascript
各种效果的jquery ui(接口)介绍
Sep 17 Javascript
javascript在myeclipse中报错的解决方法
Oct 29 Javascript
jQuery根据元素值删除数组元素的方法
Jun 24 Javascript
JavaScript简单下拉菜单实例代码
Sep 07 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
May 24 Javascript
总结Javascript中的隐式类型转换
Aug 24 Javascript
自己封装的一个原生JS拖动方法(推荐)
Nov 22 Javascript
如何制作幻灯片(代码分享)
Jan 06 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
Feb 08 Javascript
Bootstrap警告框(Alert)插件使用方法
Mar 21 Javascript
JS实现纵向轮播图(初级版)
Jan 18 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
用IE远程创建Mysql数据库的简易程序
2006/10/09 PHP
加速XP搜索功能堪比vista
2007/03/22 PHP
使用PHP获取网络文件的实现代码
2010/01/01 PHP
Laravel 5框架学习之数据库迁移(Migrations)
2015/04/08 PHP
JavaScript中的16进制字符(改进)
2011/11/21 Javascript
jQuery中需要注意的细节问题小结
2011/12/06 Javascript
JavaScript版DateAdd和DateDiff函数代码
2012/03/01 Javascript
javascript错误的认识不用关心内存管理
2012/12/15 Javascript
浅谈JS日期(Date)处理函数
2014/12/07 Javascript
jQuery动态修改超链接地址的方法
2015/02/13 Javascript
javascript中mouseover、mouseout使用详解
2015/07/19 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
2015/12/02 Javascript
JavaScript组件开发完整示例
2015/12/15 Javascript
详解js图片轮播效果实现原理
2015/12/17 Javascript
javascript实现移动端上的触屏拖拽功能
2016/03/04 Javascript
jQuery实现圣诞节礼物动画案例解析
2016/12/25 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
2017/09/12 Javascript
微信小程序icon组件使用详解
2018/01/31 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
2018/12/14 Javascript
react中Suspense的使用详解
2019/09/01 Javascript
python实现通过pil模块对图片格式进行转换的方法
2015/03/24 Python
Python 中的 else详解
2016/04/23 Python
Python+tkinter使用80行代码实现一个计算器实例
2018/01/16 Python
详解python单元测试框架unittest
2018/07/02 Python
python requests 测试代理ip是否生效
2018/07/25 Python
Python常用模块sys,os,time,random功能与用法实例分析
2020/01/07 Python
解决Python中报错TypeError: must be str, not bytes问题
2020/04/07 Python
Python入门基础之数字字符串与列表
2021/02/01 Python
LN-CC日本:高端男装和女装的奢侈时尚目的地
2019/09/01 全球购物
体育学院毕业生自荐信
2013/11/03 职场文书
女方回门宴答谢词
2014/01/14 职场文书
生日宴会主持词
2014/03/20 职场文书
《真想变成大大的荷叶》教学反思
2014/04/14 职场文书
2014年十一国庆节爱国演讲稿
2014/09/23 职场文书
入党申请书格式
2019/06/20 职场文书
Python中tkinter的用户登录管理的实现
2021/04/22 Python