使用正则表达式替换 link

Question

流量：

来自服务器的字符串数组，例如["com"]或["c", "o", "m"]。

有必要：

如果与来自服务器的数据（即字符串数组）匹配，则突出显示 link 中的字符。

Angular管道

export class HighlightLettersPipe implements PipeTransform {
    transform(text: any, regexGroups?: string[]): any {
        if (text && regexGroups.length) {
            regexGroups.forEach(element => {
                let pattern = element.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\^$\|]/g, '\$&');
                pattern = pattern.split(' ').filter((t) => {
                    return t.length > 0;
                }).join('|');

                let reg = new RegExp(pattern, 'gi');
                text = text.replace(reg, match => {
                    return `<span class="replace-part">${match}</span>`;
                });
            });
            return text;
        } else {
            return text;
        }
    }
}

当只有一个元素的数组到达时，一切正常，例如 ["com"]。

问题

当包含多个元素的数组到达时 - ["c", "o", "m"]，符号会突出显示，但也会插入标记。

这是因为使用了方法replace，每次returns一个新行。

完成第一遍并突出显示字符后，将返回一个新行并添加 span 标记。然后再做一个新的pass，标记span里面的符号已经高亮了，但是需要的是只有原来的link的符号一直高亮.

结果出来了：

也许有人遇到过类似的问题，会帮忙解决的。谢谢。

Answer 1

你可以使用这个技巧：不要直接替换为 <span> 标签，而是添加一些占位符，例如 ~~~~~ 用于开始标签，----- 用于结束标签，并将其替换为实际的之后的标签。这样就不会碰撞

regexGroups.forEach(element => {
    // ...
    let reg = new RegExp(pattern, 'gi');
    text = text.replace(reg, match => {
        return `~~~~~${match}-----`;
    });
});

// this part must be outside your forEach() block
text = text.replace(/~~~~~/g, '<span class="replace-part">');
text = text.replace(/-----/g, '</span>');

使用正则表达式替换 link

Replace link using regex

javascript

regex

typescript

angular-pipe

angular