时间戳

首页 > 解决方案 > 我如何将单个单词显示为角度完整消息中的超链接

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

问题描述

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

标签： angular

解决方案

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

这是我的工作StackBlitz 指令。

正则表达式方法

我得到了帮助以找到/@[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 + " ";
            }
        }
    }
}

推荐阅读