前端 - 后端返回富文本<div>180<X<=360</div>，如何避免<X<=360被解析成标签？

Question

请教一下，后端返回富文本中比如 <div>180<X<=360</div> 这种内容如何正常渲染？（因为<X<=360会被识别成html标签）

因为这个内容是先由后端生产出来的，应该没什么很好的办法直接用replace去锁定替换；
本来和后端商量后改为使用转义后的< 结果请求方法内自动把这个给替换了，因为用的是库，所以暂时没办法去避免这个问题
计划后面换一套请求方法，但是目前还是需要解决这个问题的

Answer 1

要避免 <X<=360 被解析成 HTML 标签，你可以尝试以下几种方法：

1. 使用实体编码:

* 你可以将 `<` 替换为 `&lt;`，将 `>` 替换为 `&gt;`。这样，`<X<=360` 就会变成 `&lt;X&lt;=360`，从而不会被解析为 HTML 标签。* 示例：后端返回的字符串为 `<div>180&lt;X&lt;=360</div>`。

2. 使用 CDATA:

* 在 XML 中，CDATA 用于包含可能被解析为标记的文本。虽然你的内容是 HTML，而不是 XML，但有些库或框架可能仍然支持使用 CDATA 来避免解析问题。* 示例：`<![CDATA[180<X<=360]]>`

3. 自定义标签:

* 如果你的 HTML 解析器支持自定义标签，你可以考虑使用非标准的 HTML 标签来包裹文本，例如 `<xmp>` 或 `<plaintext>`。* 示例：`<xmp>180<X<=360</xmp>`

4. 使用 JavaScript 转义:

* 如果你的富文本在前端渲染，你可以在前端使用 JavaScript 对这些特殊字符进行转义。这样可以确保即使内容被当作 HTML 解析，也不会出现问题。

5. 修改后端逻辑:

* 如果可能的话，与后端开发人员协商，确保返回的富文本内容不包含可能被解析为 HTML 的字符或字符串。

6. 考虑使用的库或框架:

* 如果你使用的库或框架有关于这方面的文档或问题解答，查看它们可能会有助于找到解决方案。

7. 暂时不渲染:

* 如果只是暂时的问题，并且你计划在未来更换请求方法或库，那么你可以考虑暂时不渲染这部分内容，直到你有更好的解决方案。

根据你的描述，你目前正在使用的库自动替换了 < 为 <。在这种情况下，你可能需要与该库的维护者或社区联系，看看是否有已知的问题或解决方案。同时，考虑上述的其他方法，看看是否可以作为临时的解决方案。