使用正则表达式替换链接答案

【问题标题】：Replace link using regex使用正则表达式替换链接
【发布时间】：2018-04-20 10:47:39
【问题描述】：

流程：

来自服务器的字符串数组，例如["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 中的符号已经突出显示，但必须始终仅突出显示 原始链接 的符号。

最后有什么东西出来了：

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

【问题讨论】：

您的Problem 部分非常混乱。
您可能需要在innerHTML 上使用您的管道，看看this 是否有帮助

标签： javascript regex angular typescript angular-pipe

【解决方案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>');

【讨论】：