Angular 7中如何高亮并编辑以{或{{开头的特定匹配文本？

要实现只高亮并编辑行内以{或{{开头的特定单词，而非整行处理，你需要把每一行的内容拆分成普通文本片段和可编辑变量片段，再分别渲染。下面是适配Angular 7的具体实现方案：

1. 编写字符串拆分函数 #

在组件类中添加一个方法，用正则表达式匹配{xxx}和{{xxx}}格式的变量，将每行文本拆分为两种类型的片段：

splitTextIntoSegments(data: string): Array<{type: 'text' | 'variable', content: string}> {
  const segments = [];
  // 匹配两种变量格式，同时捕获非变量的普通文本
  const regex = /({{\w+}}|{\w+})|([^{]+)/g;
  let matchResult;

  while ((matchResult = regex.exec(data)) !== null) {
    if (matchResult[1]) {
      // 捕获到变量片段
      segments.push({type: 'variable', content: matchResult[1]});
    } else if (matchResult[2]) {
      // 捕获到普通文本片段
      segments.push({type: 'text', content: matchResult[2]});
    }
  }
  return segments;
}

2. 修改模板渲染逻辑 #

替换原有的整行判断逻辑，循环渲染拆分后的片段：普通文本直接展示，变量片段做成可编辑的高亮元素：

<div *ngFor="let data of output; let i=index" class="line-container">
  <ng-container *ngFor="let segment of splitTextIntoSegments(data)">
    <!-- 普通文本直接渲染 -->
    <span *ngIf="segment.type === 'text'">{{segment.content}}</span>
    
    <!-- 变量片段：可编辑+高亮 -->
    <span 
      *ngIf="segment.type === 'variable'"
      class="variable-editable"
      contenteditable="true"
      (blur)="updateVariable(i, segment.content, $event.target.textContent.trim())"
    >{{segment.content}}</span>
  </ng-container>
</div>

3. 添加变量更新方法 #

当用户编辑完变量并失去焦点时，将修改后的内容更新回原数组：

updateVariable(lineIndex: number, originalVar: string, newContent: string) {
  // 避免空内容，若需要保留原变量格式可添加校验逻辑
  if (!newContent) return;

  // 替换当前行的原变量为新内容
  let updatedLine = this.output[lineIndex];
  updatedLine = updatedLine.replace(originalVar, newContent);

  // 更新数组（触发Angular变更检测）
  this.output = [
    ...this.output.slice(0, lineIndex),
    updatedLine,
    ...this.output.slice(lineIndex + 1)
  ];
}

4. 添加高亮样式 #

为可编辑变量添加视觉区分的样式，提升用户体验：

.variable-editable {
  background-color: #fff3cd; /* 浅黄色高亮 */
  padding: 2px 4px;
  border-radius: 3px;
  cursor: text;
  display: inline-block;
}

.variable-editable:focus {
  outline: 2px solid #ffc107;
  background-color: #fff9e6;
}

注意事项 #

• 如果你的变量包含下划线、短横线等特殊字符，可把正则中的\w+改成[^}]+，匹配除}之外的任意字符：/({{[^}]+}}|{[^}]+})|([^{]+)/g
• 若需要支持实时编辑（而非失去焦点后更新），可把(blur)事件换成(input)，但要注意做性能优化
• 为contenteditable元素添加样式时，建议避免自动换行，保证行内布局正常

内容的提问来源于stack exchange，提问作者Kavya Shree