Angular 在文本中获得点击的单词答案

【问题标题】：Angular get clicked word in a textAngular 在文本中获得点击的单词
【发布时间】：2021-01-26 11:39:30
【问题描述】：

在Angular中，如何获取用户刚刚单击或双击的单词？

我想要做的是：用户双击文本中的一个单词，然后突出显示该文本。

文本：“这只是一些文本”

用户点击“just”这个词 > 我在 TS 中得到它。

我用谷歌搜索过，但我发现的唯一信息是 Angular JS 中已有 10 年历史的线程。

提前致谢！

【问题讨论】：

标签： angular string text click selection

【解决方案1】：

您可以通过从文本中获取所选单词并将其替换为 HTML 标记以突出显示它来实现。

这是工作示例 -

export class AppComponent {
  text = "Start editing to see some magic happen";
  selectedWord: string;

  highlight(event) {
    this.selectedWord = window.getSelection().toString();
    this.text = this.text.replace(
      this.selectedWord,
      "<mark>" + this.selectedWord + "</mark>"
    );
  }
}

在 html 文件中，你需要对文本使用 innerHTML 并像这样在双击事件上调用 highlight() 方法 -

<p [innerHTML]="text" (dblclick)="highlight($event)"></p>

Here 也是一个 stackbiltz 工作示例。

【讨论】：

哇！完美的！非常感谢。
@Acoma 欢迎您。如果它对您有用，请您接受答案并投赞成票。提前致谢。
感谢您的代码，但我有一个场景可以重复相同的单词，所以您能建议我如何处理这种场景吗？

【解决方案2】：

为此，您需要使用 hostListner 来监控 dblclick。请检查以下内容

@HostListener('document:dblclick', ['$event'])
  onMouseDown(event) {
      let selectedText:any = ''; 

      if (window.getSelection) { 
          selectedText = window.getSelection().toString(); 
      } else if (document.getSelection) { 
          selectedText = document.getSelection().toString(); 
      } 
      console.log(selectedText);
      return; 
  }

我认为这对你有帮助

【讨论】：