Angular 4去除字符串首尾双引号及HTML内容显示异常问题求助

你这遇到了两个关联的小问题：字符串首尾带多余双引号，以及HTML标签被转义成纯文本显示。我来一步步帮你解决：

1. 去除字符串首尾的双引号 #

TypeScript和JavaScript语法一致，你可以用这两种方法处理：

方法一：正则表达式替换（灵活通用） #

如果不确定字符串是否一定首尾都有引号，用正则匹配开头/结尾的双引号并替换，适配各种情况：

// 假设后端返回的内容存在response变量中
const cleanedContent = response.replace(/^"|"$/g, '');

解释：^"匹配字符串开头的双引号，"$匹配结尾的双引号，g确保全局匹配（这里实际只会替换首尾各一个）。

方法二：切片截取（高效直接） #

如果能百分百确定字符串首尾都有双引号，直接用slice截取掉第一个和最后一个字符更高效：

const cleanedContent = response.slice(1, -1);

2. 让Angular正确渲染HTML内容 #

解决完引号问题后，直接用{{cleanedContent}}还是会把HTML标签转义成文本，这时候需要用Angular的[innerHTML]属性绑定来解析HTML：

在组件模板里这样写：

<div [innerHTML]="cleanedContent"></div>

安全提示 #

如果后端返回的内容包含不可信来源的内容（比如用户输入），直接用[innerHTML]可能有XSS攻击风险。这时候需要用Angular的DomSanitizer标记内容为安全：

首先在组件中导入并注入工具：

import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

constructor(private sanitizer: DomSanitizer) {}

// 封装处理方法
getSafeHtmlContent(): SafeHtml {
  const cleanedContent = this.response.replace(/^"|"$/g, '');
  return this.sanitizer.bypassSecurityTrustHtml(cleanedContent);
}

然后在模板中调用：

<div [innerHTML]="getSafeHtmlContent()"></div>

这样处理后，段落标签就能正确渲染成页面元素，不会再显示带引号的转义文本啦～

内容的提问来源于stack exchange，提问作者Saurabh Sharma