前几天看到有人提在网页中实时高亮关键字,大约6万多个字中高亮600个关键字,用户可以随时修改并及时高亮,也就是onkeyup时做高亮,说用正则在IE下效率不理想
想了下自已给了一个实现方案:
比如这段文本是:"这是一大段文本,一大段文本哦"
关键字是:["这是","大段文本","哦"]
首先找出最长的关键字,并把这些关键字弄成map,如:
var keys = ['这是', '这里是', '文本', '一'];
var prepareKeys = function() {
if (!prepareKeys.$map) {
var map = {};
var maxLength = 0;
for (var i = 0; i < keys.length; i++) {
map[keys[i]] = 1;
maxLength = Math.max(keys[i].length, maxLength);
}
prepareKeys.$map = {
map: map,
cache: {},
length: maxLength
}
}
return prepareKeys.$map;
}
接下来在大段文本中,从开始位置截取按最长关键字的长度截取一段
则截取后的字符串是:"这是一大",那么剩下的字符串为: "段文本,一大段文本哦"
接下来比较 "这是一大" 是否为关键字,如果是关键字,则着色并继续按上述规则截取剩余的字符串
如果"这是一大"不是关键字,则从后面截掉一个字,并把这个字追加到剩余的字符串开始位置
则"这是一大"变成"这是一" 剩余字符串为:"大段文本,一大段文本哦"
然后再比较"这是一"是否为关键字,直到为空
然后再从剩余的字符串中按上述规则继续截取
最终代码如下
var input = '这是一大段文本,这是一大段文本';
var keys = ['这是', '这里是', '文本', '一'];
var prepareKeys = function() {
if (!prepareKeys.$map) {
var map = {};
var maxLength = 0;
for (var i = 0; i < keys.length; i++) {
map[keys[i]] = 1;
maxLength = Math.max(keys[i].length, maxLength);
}
prepareKeys.$map = {
map: map,
cache: {},
length: maxLength
}
}
return prepareKeys.$map;
}
var colorKeyword = function(str) {
var info = prepareKeys();
var output = [];
while (str) {
var sub = str.substring(0, info.length);
var oSub = sub;
if (info.cache[sub]) {
console.log('cache:', sub);
output.push(str.charAt(0));
str = str.substring(1);
} else {
str = str.substring(info.length);
while (!info.map[sub] && sub) {
str = sub.charAt(sub.length - 1) + str;
sub = sub.slice(0, -1);
}
if (sub) {
output.push('<', sub, '>');
} else {
info.cache[oSub] = 1;
output.push(str.charAt(0));
str = str.substring(1);
}
}
}
return output.join('');
}
colorKeyword(input);
宣传下我的区块管理框架Magix:https://github.com/thx/magix
欢迎试用Magix、star与fork