jquery.highlight.js高亮内容插件

原创于 2020-06-02 23:49:17 发布

· 629 阅读

·

0

·

版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

文章标签：

前端专栏收录该内容

175 篇文章

订阅专栏

有一个这样的需求：在网页的一篇文章中查找关键字，找到后高亮显示.自然我们使用JavaScript或者jquery都可以实现这个功能，不过本着不重复发明轮子的原则，既然有现成的插件为什么不用呢？更何况，在一篇文章中查找关键字，jquery.highlight.js的使用是如此的简单。

jquery.highlight.js功能：在网页中实现字符串的高亮，高亮颜色可配置

jquery.highlight.js下载：https://pan.baidu.com/s/14cksZNOVoncPbzZEH99KKQ

示例效果如下：

html代码：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>jquery.highlight</title>

<script src="media/js/jquery.js"></script>

<script src="jquery.highlight.js"></script>

<style>

.highlight {background-color: #FFFF88; }

</style>

</head>

<body>

<input type="text" id="search">

<input value="搜索" type="button" id="searchBtn">

<table style="width:80%" border=1 cellspacing=0 id="table">

<tr>

<td>编号</td>

<td>姓名</td>

<td>职业</td>

<td>电话</td>

<td>亲属</td>

<td>亲属关系</td>

</tr>

<tr>

<td>1000001</td>

<td>李白</td>

<td>诗人</td>

<td>12345667777777</td>

<td>杜甫</td>

<td>朋友</td>

</tr>

<tr>

<td>1000002</td>

<td>辛弃疾</td>

<td>词人</td>

<td>8888888888</td>

<td>陆游</td>

<td>朋友</td>

</tr>

</table>

</body>

</html>

JavaScript代码：

1

2

3

4

5

6

7

8

<script>

$("#searchBtn").click(function(){

var val=$("#search").val();

var table = $('#table');

table.unhighlight();

table.highlight(val);

});

</script>

注意：

jquery.highlight.js需要依赖jquery，因此需要先引入jquery。

jquery.highlight.js只有两个方法，一个是unhighlight()，用于清除高亮。

highlight(val):用于在网页中高亮val，在这个方法执行的过程中，会去找一个名字叫做“highlight”的css类，因此你需要定义这个css类。

评论 1

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。