Open xinglie opened 8 years ago
前几天看到有人提在网页中实时高亮关键字,大约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);
前几天看到有人提在网页中实时高亮关键字,大约6万多个字中高亮600个关键字,用户可以随时修改并及时高亮,也就是onkeyup时做高亮,说用正则在IE下效率不理想
想了下自已给了一个实现方案: 比如这段文本是:"这是一大段文本,一大段文本哦" 关键字是:["这是","大段文本","哦"] 首先找出最长的关键字,并把这些关键字弄成map,如:
接下来在大段文本中,从开始位置截取按最长关键字的长度截取一段
则截取后的字符串是:"这是一大",那么剩下的字符串为: "段文本,一大段文本哦"
接下来比较 "这是一大" 是否为关键字,如果是关键字,则着色并继续按上述规则截取剩余的字符串
如果"这是一大"不是关键字,则从后面截掉一个字,并把这个字追加到剩余的字符串开始位置
则"这是一大"变成"这是一" 剩余字符串为:"大段文本,一大段文本哦"
然后再比较"这是一"是否为关键字,直到为空
然后再从剩余的字符串中按上述规则继续截取
最终代码如下