HTML 字符在渲染过程中不被翻译

Question

我有一些 js 代码呈现以下 HTML

<div contenteditable="false" tabindex="0" class="ProseMirror">
    <p> didn&#039;t project a significant increase</p>
</div>

在浏览器中，它实际上显示字符 #039; 而不是将其转换为 ' 有没有办法 force/prevent 浏览器不进行这种转换？

Answer 1

渲染 HTML entity 时，可能需要编译。您可以使用以下选项之一：

<p> didn{{ `&#039;` }}t project a significant increase</p>

<p> didn<span v-html="`&#039;`"></span>t project a significant increase</p>

请注意，前两个示例使用的是 template literal，而不是单引号。

如果使用渲染函数，可以设置 innerHTML domProps:

render(h) {
  return h('span', {
    domProps: {
      innerHTML: 'didn&#039;t project a significant increase'
    }
  });
}

这是一个demo

原创

您缺少 &，它应该是：

<p> didn&#039;t project a significant increase</p>

Answer 2

以我的具体情况。我结束了。通过使用 he HTML encoder/deccoder https://www.npmjs.com/package/he 在渲染之前解码 HTML 来解决问题。

HTML characters are not transalated during render