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

本文通过一个实例说明了JavaScript简单实现了关键词文本搜索的高亮功能。分享给大家参考，如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML 1-Transitional . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title www . JB 51 . net js关键字文本高亮/title/head body div id='content '前端通常指网站的表示层和结构层。所以前端技术一般分为前端设计和前端开发。前端设计一般可以理解为网站的视觉设计，而前端开发则是网站的前端代码实现。现在最新的高级版本有HTML5、CSS3、SVG等。HTML、CSS和JavaScript是前端开发中最基础、最必要的三项技能。在前端开发中，HTML定义元素，CSS定位显示的元素，然后通过JavaScript实现相应的效果和交互。虽然表面上看起来简单，但绝对不缺要掌握的东西。在开发之前，有必要搞清楚这些概念，这样在开发过程中就会得心应手。/div input type=' text ' id=' text ' placeholder='请输入关键字'/inputtype=' button' id=' button '值=' ok '/script var content=document . getelementbyid(' content ')；var contents=content.innerHTMLvar 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.jb51.net/code/HtmlJsRun,此次测试结果如下：

另外：这里，搜索高亮是通过点击按钮按钮来实现的。在此基础上，边肖稍作修改，给出了一个实时显示文本搜索的例子：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML 1-Transitional . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title www . JB 51 . net js关键字文本高亮/title/head body div id='content '前端通常指网站的表示层和结构层。所以前端技术一般分为前端设计和前端开发。前端设计一般可以理解为网站的视觉设计，而前端开发则是网站的前端代码实现。现在最新的高级版本有HTML5、CSS3、SVG等。HTML、CSS和JavaScript是前端开发中最基础、最必要的三项技能。在前端开发中，HTML定义元素，CSS定位显示的元素，然后通过JavaScript实现相应的效果和交互。虽然表面上看起来简单，但绝对不缺要掌握的东西。在开发之前，有必要搞清楚这些概念，这样在开发过程中就会得心应手。/div输入类型=' text' id=' text '占位符='请输入关键字'/script var content=document . getelementbyid(' content ')；var contents=content.innerHTMLvar 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.jb51.net/code/HtmlJsRun来测试运行效果。

更多对JavaScript相关内容感兴趣的读者可以查看本网站专题：《JavaScript数据结构与算法技巧总结》、《JavaScript数学运算用法总结》、《JavaScript排序算法总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、0103010

希望本文对JavaScript编程有所帮助。