后端传过来的json中包含富文本 js怎么解析
时间: 2024-03-22 21:37:57 浏览: 34
如果你想在前端将后端传过来的 JSON 中的富文本进行解析并渲染到页面上,可以使用第三方库,比如 `DOMPurify` 和 `marked`。
`DOMPurify` 可以帮助你清除富文本中的不安全的内容,比如 script 标签、onclick 属性等,以防止 XSS 攻击。示例代码如下:
``` javascript
import DOMPurify from 'dompurify';
const json = { richText: '<p>Hello, <strong>world!</strong></p>' };
const sanitizedHtml = DOMPurify.sanitize(json.richText);
document.getElementById('my-element').innerHTML = sanitizedHtml;
```
这里使用 `dompurify` 库中的 `sanitize` 方法来清除富文本中的不安全内容,然后将清除后的 HTML 插入到页面元素中。
如果你想支持更多的富文本元素,可以使用 `marked` 库来将 Markdown 格式的文本转换为 HTML。示例代码如下:
``` javascript
import DOMPurify from 'dompurify';
import marked from 'marked';
const json = { markdown: '## Hello, **world!**' };
const html = marked(json.markdown);
const sanitizedHtml = DOMPurify.sanitize(html);
document.getElementById('my-element').innerHTML = sanitizedHtml;
```
这里先使用 `marked` 库将 Markdown 格式的文本转换为 HTML,然后再使用 `dompurify` 库来清除不安全内容,最后将清除后的 HTML 插入到页面元素中。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)