将文本区域标记的内容着色为 JSON（带颜色）

Question

我有一个 Angular 应用程序，在这个应用程序中，我有一个文本区域，我将始终向其中写入 json 文本，我想要的是在我在此文本区域中写入的同时，如果 json 有效，我想要文本要丰富多彩（键带有一种颜色，值带有另一种颜色）（这与编写 JSON 时的 Postman 类似）。

到目前为止我尝试过的：
HTML：

` <textarea
     pInputText
     placeholder="required name and schemaJson object"
     formControlName="schema"
     id="schema" rows="10" cols="50" required
     (input)="updateTextColor($event.target.value)">
                        </textarea>````

TypeScript：

updateTextColor(text: string): void {
    try {
      const jsonObject = JSON.parse(text);
      const coloredText = this.colorizeJSON(jsonObject);
      document.getElementById('schema').innerHTML = coloredText;
    } catch (error) {
      // If JSON parsing fails, keep the text as is
      document.getElementById('schema').innerText = text;
    }
  }

  colorizeJSON(obj: any): string {
    let coloredText = '';
    for (const key in obj) {
      if (obj.hasOwnProperty(key)) {
        coloredText += `<span class="json-key">${key}</span>: `;
        if (typeof obj[key] === 'object') {
          coloredText += this.colorizeJSON(obj[key]);
        } else {
          coloredText += `<span class="json-value">${obj[key]}</span>`;
        }
        coloredText += ', ';
      }
    }
    // Remove trailing comma and return
    return coloredText.replace(/,\s*$/, '');
  }

PS：我尝试过使用Ngx-monaco，但由于其他错误而失败`

Answer 1

Textarea 元素不支持直接在其中渲染 HTML 内容。 这是类似的问题。如果是角度，则不需要使用 html 字符串创建字符串作为 .ts 文件中的内容。使用

*ngFor

/

@for

和

*ngIf

/

@if

创建您需要的 html 结构（使用

div

s 和

span

s），然后迭代从该 JSON 获得的键/值并将它们分配给

span

使用这样的绑定：

<div class="some-class-to-look-like-textarea-before">
    <span *ngFor="let spanColor of parsedColors" [style.color]="spanColor">Your text here</span>
</div>