Vue js仅对某些HTML标签进行转义答案

【问题标题】：Vue js unescape only certain HTML tagsVue js仅对某些HTML标签进行转义
【发布时间】：2022-09-24 10:12:58
【问题描述】：

我正在使用 v-html 取消转义 Html 标记但我只想取消转义字符串中的 <a></a> 标记。举个例子

输入：

<p> Hello World </p> <a target=\"_blank\" href=\"https://www.google.com/\">https://www.google.com/</a> <div></div>

输出：链接处于活动状态，但所有其他标签应为纯文本

<p> Hello World </p> https://www.google.com/ <div></div>

如何在 Vue 中只取消链接标签并保留其他标签？

v-html 根本不会转义 HTML，事实上它的作用正好相反。请给出您的字符串的正确示例，您当前如何使用它们以及您期望的结果是什么
如果这是用户输入，您可能想要npmjs.com/package/vue-sanitize 之类的东西。

标签： javascript html vue.js escaping

【解决方案1】：

这是最容易使用正则表达式将所有&lt; 和&gt; 替换为&lt; 和&gt; 的时候之一，除了<a> 标签周围的那些

new Vue({
  el: "#app",
  data: () => ({
    input: `<p> Hello World </p> <a target="_blank" href="https://www.google.com/">https://www.google.com/</a> <div></div>`
  }),
  computed: {
    output: ({ input }) => input
      .replace(/<(?!\/?a( |>))/g, "&lt;")
      .replace(/(?<=&lt;[^>]+)>/g, "&gt;")
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <div v-html="output"></div>
  <pre>output = {{ output }}</pre>
</div>

两个替补是

将不属于<a> 或</a> 的任何&lt; 替换为&lt;
用&gt; 替换现在前面带有&lt; 的任何&gt;
请注意，lookbehind 断言目前在任何版本的 Safari 中都不起作用。

【讨论】：

【解决方案2】：

HTML 具有您可以使用的转义标签：

&lt; (<)
&gt; (>)

使用这些知识，您可以轻松解决您的问题。

<p>你好世界</p> https://www.google.com/ <div></div>

&lt; p &gt; Hello World &lt; /p &gt; https://www.google.com/ &lt; div &gt; &lt; /div &gt;

【讨论】：