Vue js 只转义某些 HTML 标签

Question

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

输入：

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

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

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

如何在 Vue 中仅取消转义 link 标签并保留其他标签？

Answer 1

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

< (<)
> (>)

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

你好世界

https://www.google.com/

=

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

Answer 2

这是使用正则表达式将所有 < 和 > 替换为 < 和 > 最简单的时代之一，除了那些<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> 的任何 < 替换为 <
用 >

<

>

请注意，lookbehind 断言目前在任何版本的 Safari 中都不起作用。

Vue js 只转义某些 HTML 标签

Vue js escape only certain HTML tags

html

javascript

escaping

vue.js