JavaScript   发布时间:2022-04-16  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了JavaScript简单实现关键字文本搜索高亮显示功能示例大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

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

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> cn.js-code.com JS关键字文本高亮
相应的效果和交互。然表面看起来很简单,但这里面@R_712_9262@东西绝对不会少。在进行开发前,需要对这些概念弄清楚、弄明白,这样在开发的过程中才会得心应手。
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('BACkground:red;">' + value + ''); };

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

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