Question

我正在处理一个我不知道的奇怪的格式错误。在其他一些人的帮助下，我有一个小函数，用一个指向实际Twitter用户的链接替换字符串中的所有@ [user]。它的效果很好，但是一旦将其添加到我的网页中，它就会开始变得有些怪异。

这里有一个字符串示例。

If you want these foams Ima give you the chrome <a href="https://twitter.com/WillThaRapper" target="_blank">@WillThaRapper</a>

但是，一旦我将其附加到要显示在页面上的<p>元素上，它就看起来像这样。

If you want these foams Ima give you the chrome &lt;a href&#x3D;&quot;https:&#x2F;&#x2F;twitter.com&#x2F;WillThaRapper&quot; target&#x3D;&quot;_blank&quot;&gt;@WillThaRapper&lt;&#x2F;a&gt;

我很难解决这个问题。

Answer 1

问题似乎是您要在HTML中添加一串HTML实体。要添加实际的HTML，您可以使用DOMParser将实体转换为可以在DOM上呈现的HTML：

const decodeEntities = str => {
  const doc = new DOMParser().parseFromString(str, "text/html");
  return doc.documentElement.textContent;
}

// input = the text you want to append to the page
const input = "If you want these foams Ima give you the chrome &lt;a href&#x3D;&quot;https:&#x2F;&#x2F;twitter.com&#x2F;WillThaRapper&quot; target&#x3D;&quot;_blank&quot;&gt;@WillThaRapper&lt;&#x2F;a&gt";

document.getElementById("output").innerHTML += decodeEntities(input);

<p id="output"></p>

将html锚标记添加到字符串时的格式错误

1 个答案: