vue中链接渲染的问题

Question

像某些论坛、一样，输入一个链接会渲染成超链接，但是输入html代码片段则不会渲染成html。

自己用的vue开发，单纯的匹配链接替换成a标签用v-html解析会有安全问题。

小白来请教一下思路

Answer 1

首先，用户输入的是字符串，而页面最终要输出的是 Vue 组件，你要做的就是实现一个字符串转换为 VNode List 的过程（动态组件）。

然后，用户输入的是一个 URL 还是一段 HTML，这个是可以判断出来的。对于 URL，替换成 <a> 或者一个链接组件；对于 HTML，sanitize 后原文输出字符串即可。这个过程其实跟 v-html 没什么关系。

当然如果页面最终的显示没有 Vue 的参与，那无非是全部转换成 HTML 字符串的事，大致过程相同。安全不安全，取决于你如何 sanitize。