使用正则表达式替换链接

Question

流量：

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

有必要：

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

角管

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，每次都会返回一个新行。

在第一次传递并突出显示字符后，将返回一个添加了span标记的新行。然后会生成一个新的传递，并且标记已在标记span中突出显示，但只有原始链接的符号始终突出显示。

最终出现了一些问题：

也许有人遇到了类似的问题并且会帮助解决它。谢谢。

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>');