搜索高亮网页显示技术研究
1 引言
最近收到调研需求，是关于mark.js的替换研究。我们先来看看这个库是干什么的。
mark.js是一个用JavaScript编写的文本高亮器。它可以用来动态标记搜索词或自定义正则表达式，并为您提供内置选项，如支持双音节、单独的单词搜索、自定义同义词、支持iframe、自定义过滤器、精度定义、自定义元素、自定义类名等。
下面是一个运行效果图：
2 安装
你可以通过运行npm下载该软件包：
npm install mark.js --save-dev
或者使用Bower：
bower install mark.js --save-dev
或者手动下载软件包：
https://cdnjs.com/libraries/mark.js/
https://www.jsdelivr.com/package/npm/mark.js?path=dist
3 可能的替换库
3.1 @brianmcallister/highlight-text
highlight-text使字符串中的单词和字符的高亮显示变得快速而简单。该库主要用于为网页中的任何文本添加一个可视化指示器，就像浏览器中的默认搜索功能一样。
这是突出显示从应用程序中的输入字段或一系列可能的用例中收集的搜索结果的好方法。
1. 聊天应用程序中用户配置的搜索词
2. 管理员配置的公告
3. 视觉设计元素
默认情况下，该库将接受一个字符串和一些子字符串来搜索。它将返回所有找到的由<mark>标签包围的字符串，然后可以根据你的品牌进行样式设计。这一点是可以配置的，从而可以使用任何任意字符串或HTML标签。
3.1.1 运行效果
3.1.2 最新版本
2.0.3 于 2020年4月
3.1.3 官方地址
https://github.com/brianmcallister/highlight-text
3.1.4 安装
npm install @brianmcallister/highlight-text
3.1.5 使用
import highlightText from '@brianmcallister/highlight-text';
highlightText('some text', ['om', 'ex']);
// #=> 's<mark>om</mark>e t<mark>ex</mark>t'
3.1.6 API
highlightText是组件名称。
使用这个React组件来高亮文本中的单词。
highlightText(text: string, words: string[]): string;
3.2 @brianmcallister/react-highlight-text
react-highlight-text是一个集成了highlight-text的React组件。
3.2.1 运行效果
3.2.2 最新版本
1.0.5 于 2020年4月
3.2.3 官方地址
https://github.com/brianmcallister/react-highlight-text
3.2.4 安装
npm install @brianmcallister/react-highlight-text
3.2.5 使用
import HighlightText from '@brianmcallister/react-highlight-text';
const MyComponent = () => (
<HighlightText
text="Hello world! I'm highlighted!"
words={['world', 'highlighted']}
/>
);
3.2.6 API
HighlightText是组件名称。
使用这个React组件来高亮文本中的单词。
interface Props {
text: string;
words: string[];
}
3.3 highlight-search-text
响应式组件，用于在React中通过关键字突出显示文本。
3.3.1 运行效果
3.3.2 最新版本
1.1.1 于 2020年4月
3.3.3 官方地址
https://github.com/1ofshant/highlight-search-text
3.3.4 安装
npm install highlight-search-text –save
3.3.5 使用
import HighlightText from 'highlight-search-text';
<HighlightText
search={search}
text={text}
highlightClassName="highlight"
containerClassName="container"
className="other"
caseIgnore
spaceIgnore
startWord
endWord
fullWord
all
/>
<HighlightText
text="Once Upon A Time, In A Galaxy Far..."
search="on"
highlightClassName="highlight"
containerClassName="container"
className="other"
caseIgnore
all
>
<span class="container">
<span class="highlight">On</span>
<span class="other">ce Up</span>
<span class="highlight">on</span>
<span class="other"> A Time, In A Galaxy Far...</span>
</span>
3.3.6 API
属性 |
类型 |
缺省值 |
描述 |
search |
string |
'' |
要找的目标 |
text |
string |
'' |
数据源 |
highlightClassName |
string |
'' |
高亮元素的类 |
containerClassName |
string |
'' |
主容器的类 |
className |
string |
'' |
其他元素的类 |
caseIgnore |
boolean |
false |
允许搜索任何一段文字，忽略其大小写敏感性（大写/小写）。 |
spaceIgnore |
boolean |
false |
允许搜索任何一段文本，忽略前导和后缀的空格。 |
startWord |
boolean |
false |
允许搜索任何一段以输入的单词开始的文本。 |
endWord |
boolean |
false |
可以搜索任何一段以输入词结尾的文本。 |
fullWord |
boolean |
false |
允许搜索文本中的整个单词。它只带来第一个匹配的词。 |
all |
boolean |
false |
可以搜索整个词，并在文本中搜索所有匹配的词。 |
3.4 angular-text-input-highlight
一个可以在文本区域中突出显示部分文本的组件。用于显示提及的内容等。
3.4.1 运行效果
3.4.2 最新版本
1.4.2 于 2020年3月
3.4.3 官方地址
https://github.com/mattlewis92/angular-text-input-highlight
3.4.4 安装
npm install --save angular-text-input-highlight
3.4.5 使用
在你的应用程序中的某个地方包含样式表。
node_modules/angular-text-input-highlight/text-input-highlight.css
然后引入模块中:
import { NgModule } from '@angular/core';
import { TextInputHighlightModule } from 'angular-text-input-highlight';
@NgModule({
imports: [
TextInputHighlightModule
]
})
export class MyModule {}
在组件中使用：
import { Component, ViewEncapsulation } from '@angular/core';
import { HighlightTag } from 'angular-text-input-highlight';
@Component({
template: `
<div mwlTextInputHighlightContainer>
<textarea
mwlTextInputElement
[(ngModel)]="text"
#textarea>
</textarea>
<mwl-text-input-highlight
[tags]="tags"
[textInputElement]="textarea">
</mwl-text-input-highlight>
</div>
`,
styles: [
`
// by default you won't see the highlighted tags until
// you add a CSS class with a background color
.bg-blue {
background-color: lightblue;
}
.bg-pink {
background-color: lightcoral;
}
`
],
encapsulation: ViewEncapsulation.None
})
class MyComponent {
text = 'this is some text';
tags: HighlightTag[] = [{
indices: { start: 8, end: 12 },
cssClass: 'bg-blue',
data: { user: { id: 1 } }
}];
}
3.5 highlight-words
给一段文本和一个查询，它就将匹配和非匹配分开，在应用中突出显示匹配。
3.5.1 运行效果
3.5.2 最新版本
1.0.6 于 2020年4月
3.5.3 官方地址
https://github.com/tricinel/highlight-words
3.5.4 安装
npm i --save highlight-words
3.5.5 使用
import highlightWords from 'highlight-words';
const chunks = highlightWords({
text: 'The quick brown fox jumped over the lazy dog',
query: 'over'
});
console.log(chunks);
/*
[
{
id: '62acb210-76dd-4682-b948-8d359a966dcb'
text: 'The brown fox jumped ',
match: false
},
{
id: '69779adf-6d7c-45ec-ae9b-49d0cb292e28';
text: 'over',
match: true
},
{
id: '46c5b7a0-5414-47c5-81ba-2496f33fe2f6';
text: ' the lazy dog',
match: false
}
]
*/
3.5.6 选项
你添加一些选项。
1. clipBy. 如果你想省略不匹配的内容，可以使用此选项。
2. matchExactly. 默认情况下，高亮显示器会查找查询中的任何一个词的出现。例如，如果您的查询中出现了 brown fox，高亮显示器将把 brown 和 fox 都视为单独的匹配词。
3.5.7 参数
highlightWords接受一个对象作为参数，其结构如下：
属性 |
类型 |
必填? |
描述 |
缺省 |
text |
String |
✓ |
数据源文字内容 |
empty |
query |
String |
✓ |
查询内容 |
empty |
clipBy |
Number |
匹配内容两边显示多少单词 |
null |
|
matchExactly |
Boolean |
是否全量匹配 |
false |
3.5.8 返回的内容
highlightWords返回一个对象数组，每个对象的结构如下：
属性 |
类型 |
描述 |
key |
String |
一个独特的键，当你想在映射函数中使用块时，比如可与React或Angular一起使用。 |
text |
String |
块中的字或词。 |
match |
Boolean |
这块是否匹配你的搜索？ |
3.5.9 用你选择的框架来使用它
3.5.9.1 React
<p>
{chunks.map(({ text, match, key }) =>
match ? (
<span className="highlight" key={key}>
{text}
</span>
) : (
<span key={key}>{text}</span>
)
)}
};
</p>
3.5.9.2 Angular
<p>
<span *ngFor="let chunk of chunks; trackBy: key" class="highlight">
{{ chunk.text }}
</span>
</p>
3.5.9.3 Vue
<p>
<span
v-for="chunk in chunks"
:key="chunk.key"
v-bind:class="{ active: chunk.match }"
>
{{ chunk.text }}
</span>
</p>
- 点赞
- 收藏
- 关注作者
评论（0）