高亮关键词算法

一个常见的小需求：将字符串中的关键字高亮。

方案一：正则表达式

function highlight(source,keyword) {
    if(keyword == '') return source; // 避免空字符串
    let reg = new RegExp(keyword,'g');
    return source.replace(reg,`<span style="color:#E9686B">${keyword}</span>`);
 }

方案二: split 和 reduce 大法

 function highlight(source,keyword) {
    if(keyword == '') return source; // 避免空字符串
    return source.split(keyword)
        .reduce((acc, current, i) => {
            if (!i) { // 当下标是0的时候，直接返回当前项
                return [current];
            }
            return acc.concat(`<span style="color:#E9686B">${keyword}</span>`, current);
        }, []).join('');
}

方案三: split 和 forEach 大法

function highlight(source,keyword) {
    if(keyword == '') return source;  // 避免空字符串

    let res = source == keyword ? source : '';
    source.split(keyword).forEach((item,i) => {
        if(!i) {  // 当下标是0的时候，直接返回当前项
            res += item 
        } else {
            res += `<span style="color:#E9686B">${keyword}</span>` + item;
        }
    });
    return res;
 }

小细节

• split方法，当分隔符在字符串中不存在时，则返回的数组包含一个由整个字符串组成的元素
• 边界计算：关键词必须夹在数组元素中间，所以数组首元素直接返回。而且由于split的特殊性，首元素不可能是分隔符(当然不考虑空字符串)

例如：

let str = '1234567890';
str.split('x');   // ['1234567890']

参考

angular过滤器 -- 关键字高亮显示
react的搜索高亮关键字