微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

rush:js;"> 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按钮点击实现的搜索高亮显示,小编在此基础上稍作修改,给出一个实时显示文本搜索的例子:

相关推荐