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

前端之家收集整理的这篇文章主要介绍了JavaScript简单实现关键字文本搜索高亮显示功能示例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

www.jb51.cc JS关键字文本高亮
前台代码实现,现在最新的高级版本HTML5、CSS3,以及SVG等。 HTML、CSS、JavaScript是前端开发中最基本也是最必须的三个技能。前端的开发中,在页面的布局时, HTML将元素进行定义,CSS对展示的元素进行定位,再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单,但这里面需要掌握的东西绝对不会少。在进行开发前,需要对这些概念弄清楚、弄明白,这样在开发的过程中才会得心应手。
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(''); };

使用在线HTML/CSS/JavaScript代码运行工具:,测试运行结果如下:

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

猜你在找的JavaScript相关文章