Angular2中如何使用textareaHighlight插件？求文本框关键词高亮插件推荐

嘿，我来帮你搞定Angular 2里的Textarea单词高亮问题～

一、如何在Angular 2中使用textareaHighlight插件 #

首先得说，这个插件本身不是专门为Angular 2设计的，所以得做些适配才能用：

• 第一步：先安装插件，打开终端跑这个命令：npm install textarea-highlight --save
• 第二步：配置Angular 2的脚本引入，找到你的angular-cli.json（当时Angular 2的配置文件），在scripts数组里加上插件的路径，比如："../node_modules/textarea-highlight/dist/textarea-highlight.min.js"
• 第三步：在你的组件里通过ElementRef获取Textarea元素，然后初始化插件。举个例子：

import { Component, ElementRef, AfterViewInit, ViewChild } from '@angular/core';

@Component({
  selector: 'app-textarea-demo',
  template: `<textarea #myTextarea rows="5" cols="50"></textarea>`
})
export class TextareaDemoComponent implements AfterViewInit {
  @ViewChild('myTextarea') textareaRef: ElementRef;

  ngAfterViewInit() {
    // 拿到原生的textarea元素
    const textareaEl = this.textareaRef.nativeElement;
    // 因为插件是全局挂载的，所以用(window as any)来访问
    (window as any).textareaHighlight(textareaEl, {
      // 这里放你的单词列表
      words: ['angular', 'typescript', 'javascript'],
      // 自定义高亮的类名，方便加样式
      highlightClass: 'custom-highlight'
    });
  }
}

• 第四步：加个高亮样式，在组件的styles里写：

.custom-highlight {
  background-color: #ffeb3b;
  color: #333;
  padding: 2px 4px;
  border-radius: 2px;
}

另外要注意，如果你的单词列表会动态变化，得手动调用插件的更新方法（具体看插件文档），因为Angular的变更检测不会自动触发插件的更新哦。

二、适合Angular 2的单词高亮插件推荐 #

你说在Angular 2生态里找不到合适的，确实因为Angular 2是比较早期的版本，专门的插件不多，但这几个方案可以试试：

1. ngx-text-highlight（适配Angular 2的版本） #

这个是Angular原生的指令，比第三方JS插件更贴合Angular的机制。你要装适配Angular 2的版本，跑这个命令：npm install ngx-text-highlight@1.x --save

• 用法：先在你的模块里导入TextHighlightModule：

import { TextHighlightModule } from 'ngx-text-highlight';

@NgModule({
  imports: [TextHighlightModule]
})
export class AppModule {}

• 然后在模板里直接用：

<textarea 
  [(ngModel)]="inputContent"
  [textHighlight]="highlightWordsList"
  [highlightClass]="'custom-highlight'"
></textarea>

• 组件类里定义你的单词列表：

inputContent = '';
highlightWordsList = ['angular', 'typescript', 'javascript'];

这个方案的好处是不用手动操作DOM，Angular的变更检测会自动处理列表变化。

2. 自己实现自定义高亮逻辑（最可控的方案） #

如果找不到合适的插件，自己写个简单的逻辑反而更灵活。核心思路是用一个隐藏的textarea接收输入，同时用一个div来渲染高亮后的内容（因为textarea本身不能渲染HTML），双向绑定输入内容就行。示例代码如下：

import { Component } from '@angular/core';

@Component({
  selector: 'app-custom-highlight-textarea',
  template: `
    <div class="textarea-wrapper">
      <!-- 真实的textarea，用来接收输入，隐藏但可交互 -->
      <textarea 
        [(ngModel)]="userInput"
        (input)="updateHighlightedContent()"
        class="hidden-input"
        rows="5"
        cols="50"
      ></textarea>
      <!-- 用来显示高亮内容的容器 -->
      <div class="highlight-display" [innerHTML]="highlightedContent"></div>
    </div>
  `,
  styles: [`
    .textarea-wrapper {
      position: relative;
      width: 100%;
      max-width: 500px;
    }
    .hidden-input {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      background: transparent;
      border: 1px solid #ddd;
      padding: 10px;
      font-size: 14px;
      resize: none;
    }
    .highlight-display {
      position: relative;
      z-index: 1;
      border: 1px solid #ddd;
      padding: 10px;
      font-size: 14px;
      min-height: 100px;
      white-space: pre-wrap;
      overflow-y: auto;
    }
    .highlight-word {
      background-color: #ffeb3b;
      color: #333;
    }
  `]
})
export class CustomHighlightTextareaComponent {
  userInput = '';
  highlightedContent = '';
  // 你的单词列表
  targetWords = ['angular', 'typescript', 'javascript'];

  updateHighlightedContent() {
    let content = this.userInput;
    // 构建正则，匹配单词边界，避免部分匹配
    const regex = new RegExp(`\\b(${this.targetWords.join('|')})\\b`, 'gi');
    // 把匹配到的单词包裹成带样式的span
    this.highlightedContent = content.replace(regex, '<span class="highlight-word">$1</span>');
  }
}

这个方案完全不需要依赖第三方插件，你可以根据自己的需求调整样式、匹配规则，比如支持大小写不敏感、部分匹配等等，非常灵活。

内容的提问来源于stack exchange，提问作者Bijay Kumar Rai