angular - 我如何将单个单词显示为 Angular 完整消息的超链接

Question

我正在使用插值在我的 Angular 应用程序上显示一条消息。该消息也包括一个人的名字。我使用@来指定人名。我想要的是我正在显示的任何人的名字都应该是一个超链接。当点击链接时，人会被重定向到个人资料。

Answer 1

你想构建一个管道指令 事实证明，操作 DOM 元素更适合指令和组件。

这是我的工作 StackBlitz directive .

正则表达式方法

我得到帮助找到了有效的正则表达式 /@[0-9a-zA-Z]{5,20}(?=\\s|$)/:

// REGEX-MATCH AND REPLACE THE USERNAME SUBSTRING(S)
ngAfterViewInit(){
    this.initialText = this.el.nativeElement.innerText;

    this.finalText = this.initialText.replace(/@[0-9a-zA-Z]{5,20}(?=\\s|$)/, function(username) {
        return `<a href="#${username.substring(1)}">${username}</a>`;
    });

循环方式

当循环时，您必须测试每个单词以检查 @xxxxxxx 用户名的多次出现。

• 获取任意一组文本
• 在每个空格处拆分每个单词
• 检查每个单词是否匹配@xx
• @username 文本引用的词
• 将@username 实例包装在一个标签中
• 用finalText替换元素的原始文本
• 这不检查特殊字符
• 这不会检查已经包装的@usernames

这两个版本都在 StackBlitz 中，使用 innerHTML 替换。

ngAfterViewInit(){
    this.initialText = this.el.nativeElement.innerText;
    if (this.initialText && this.initialText.length > 0) {
        for (let text of this.initialText.split(" ")) {
            if (text.startsWith("@") && text.length > 1){
              this.finalText += `<a href="#${text.substring(1)}">${text}</a> `;
            } else {
              this.finalText += text + " ";
            }
        }
    }
}