HTML5中字符串的编码/解码问题

Question

我试图在 HTML 浏览器中显示下面的字符串，但是当浏览器在字符串中遇到像“”这样的自定义标签时，它只是跳过了那个。

我尝试了 encodeURIComponent()，后来又尝试在我的 HTML 模板中 decodeURIComponent，但没有成功。

我什至尝试通过创建如下所示的 PIPE 来清理 HTML，但没有成功。

transform(v: string): SafeHtml {
        return this._sanitizer.bypassSecurityTrustHtml(v);
    }

不知何故，浏览器正在跳过字符串中的元素。

后面是字符串

“The endpoint is browser-based, rather than RESTful. Therefore it could 
     result in the following different scenarios,↵1. SUCCESS 
    (response_type=code)↵> redirect_uri?code=<authorization-code>&scope= 
    <resource-owner-approved-scopes>[&state=<state-provided-by-the-client>]."

Answer 1

永远不要用innerHTML 插入文本；仅插入带有innerHTML 的HTML。

现在的浏览器有一个textContent 属性：

yourDiv.textContent = stringFromServer;

另外，为了澄清您和许多其他开发人员所犯的常见错误，encodeURIComponent 旨在将字符串编码为插入到 URL，而不是插入到 HTML时间>。 encodeURI 也是如此（你可能永远不应该使用它）。

更新：

正如您的 cmets 中所述，您实际上希望使用一些规则将文本转换为 HTML，而不是在 HTML 中插入纯文本，这将执行典型的空白规范化规则。

对此有很多选择。这里有两个：

1. 仍然只插入纯文本，但将容器中的 CSS 样式设置为 white-space: pre。这会改变空格的呈现方式，因此换行符会导致换行。
2. 拆分原始字符串，然后在 div 中穿插文本节点和 <br/> 元素。

后者的代码可能如下所示：

function insertFormattedText(container, text) {
  const chunks = text.split('\n');
  chunks.forEach((chunk, i) => {
    container.appendChild(document.createTextNode(chunk));
    if (i < chunks.length - 1) {
      container.appendChild(document.createElement('br'));
      // Equivalent of `&nbsp;&nbsp;`
      container.appendChild(document.createTextNode('\u00A0\u00A0'));
    }
  });
}