用JS将搜索的关键字高亮显示实现代码

时间:2024-11-19 16:10:01 

用JS让文章内容指定的关键字加亮

是这样的..

现在有这些关键字:美容,生活,购物
当在文章里头出现这些关键字,就把它加亮显示..

文章是生成静态页面的,而这些关键字是能随时更新的,所以我想用JS来实现...
不知道怎样来实现这样的功能啊?特此求助


<script language="JavaScript">
function highlight(key) {
 var key = key.split('|');
 for (var i=0; i<key.length; i++) {
  var rng = document.body.createTextRange();
  while (rng.findText(key[i]))
  //rng.pasteHTML(rng.text.fontcolor('red'));
  rng.pasteHTML('<div style="border:1 solid red;display:inline"><a href="#" title="+ rng.text +">' + rng.text + '</a></div>');
 }
}
highlight('文章|关键|功能')
</script>

标签:JS,关键字,高亮显示
0
投稿

猜你喜欢

  • javascript中的类,继承,构造函数详解

    2024-07-30 01:08:53
  • 详解vue-Resource(与后端数据交互)

    2024-06-05 09:15:06
  • VUEJS实战之构建基础并渲染出列表(1)

    2024-05-29 22:14:46
  • python+numpy+matplotalib实现梯度下降法

    2023-07-26 04:07:35
  • JDBC下Idea添加mysql-jar包的详细过程

    2024-01-20 10:58:18
  • 用Dreamweaver MX实现网站批量更新

    2009-09-13 18:39:00
  • python编程学习使用管道Pipe编写优化代码

    2023-08-20 04:08:45
  • python thrift 实现 单端口多服务的过程

    2022-04-28 21:46:00
  • python实现不同数据库间数据同步功能

    2024-01-18 15:58:52
  • Python实现确认字符串是否包含指定字符串的实例

    2022-04-28 07:40:28
  • python学习之第三方包安装方法(两种方法)

    2021-02-20 03:29:40
  • 简单了解Go语言中函数作为值以及函数闭包的使用

    2024-04-29 13:05:50
  • python web框架Flask实现图形验证码及验证码的动态刷新实例

    2021-01-09 15:35:53
  • Unity连接MySQL并读取表格数据的实现代码

    2024-01-19 05:20:30
  • grpcurl通过命令行访问gRPC服务

    2022-05-19 13:18:11
  • mysql socket文件作用详解

    2024-01-24 02:18:53
  • Recipe: 把SQL数据库部署到远程主机环境(第一部分)

    2007-09-23 13:07:00
  • Python 遍历子文件和所有子文件夹的代码实例

    2021-02-09 17:21:34
  • python基础教程之对象和类的实际运用

    2023-07-11 10:25:55
  • 解析MySQL join查询的原理

    2024-01-17 13:28:46
  • asp之家 网络编程 m.aspxhome.com