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