jquery.mark是一款功能强大的jQuery关键字文本高亮插件。它支持变音符号,同义词,自定义元素,自定义class名称,单词边界和iframe。它可以通过搜索的方式来高亮所有的指定关键字。

安装

可以通过bower来安装该插件。

$ bower install jquery.mark --save-dev                 
                

使用方法

使用该文本高亮插件需要在页面中引入jquery和jquery.mark.min.js文件。

<script src="js/jquery.min.js"></script>
<script src="dist/jquery.mark.min.js"></script>                 
                

API

mark()

初始化方法。

语法:

$(".context").mark(keyword [, options]);                  
                

参数:

keyword:类型:字符串或数组。可以是一个关键字或多个关键字。

options:类型:object。可以的参数选项有:

参数 类型 默认值 描述
element string "span" 包裹匹配元素的HTML元素
className string "mark" 添加到element上的class名称
filter array [] 包含排除选择器的数组。与这些选择器匹配的元素会被忽略。例如:
"filter": [".ignore", "*[data-ignore]"]
separateWordSearch boolean false 是搜索单独的词语(空格分隔)还是整个词语
diacritics boolean true 是否匹配变音符号
synonyms object { } 包含同义词的对象。对象中的键和值互为同义词。例如:
"synonyms": {"one": "1"}
wordBoundary boolean false 是否只匹配一个单词边界
iframes boolean false 是否搜索iframe中的内容
each function function(){} 每一个被标记元素的回调函数,函数接收被标记的jQuery元素作为参数
complete function function(){} 完成标记之后的回调函数
debug boolean false 如果想查看控制台信息,设置为true
log object console 控制台信息
markRegExp()

通过正则表达式来匹配的方法。

语法:

$(".context").markRegExp(regexp [, options]);             
                

参数:

keyword:要匹配的正则表达式。例如:/Lor[^]?m/gmi

options:类型:object。可以的参数选项有:

参数 类型 默认值 描述
element string "span" 包裹匹配元素的HTML元素
className string "mark" 添加到element上的class名称
filter array [] 包含排除选择器的数组。与这些选择器匹配的元素会被忽略。例如:
"filter": [".ignore", "*[data-ignore]"]
iframes boolean false 是否搜索iframe中的内容
each function function(){} 每一个被标记元素的回调函数,函数接收被标记的jQuery元素作为参数
complete function function(){} 完成标记之后的回调函数
debug boolean false 如果想查看控制台信息,设置为true
log object console 控制台信息
removeMark()

移除标记的方法。

语法:

$(".context").removeMark(options);             
                

参数:

options:类型:object。可以的参数选项有:

参数 类型 默认值 描述
element string "span" 包裹匹配元素的HTML元素
className string "mark" 添加到element上的class名称
filter array [] 包含排除选择器的数组。与这些选择器匹配的元素会被忽略。例如:
"filter": [".ignore", "*[data-ignore]"]
iframes boolean false 是否搜索iframe中的内容
each function function(){} 每一个被标记元素的回调函数,函数接收被标记的jQuery元素作为参数
complete function function(){} 完成标记之后的回调函数
debug boolean false 如果想查看控制台信息,设置为true
log object console 控制台信息

jquery.mark关键字文本高亮插件的github地址为:https://github.com/julmot/jquery.mark