如何去除富文本中的html标签及vue、react、微信小程序中的过滤器

下面我将为你分享如何去除富文本中的html标签及vue、react、微信小程序中的过滤器的攻略。

去除富文本中的html标签

方法一：使用正则表达式

在 JavaScript 中，我们可以使用正则表达式来去除富文本中的 html 标签。具体实现代码如下：

function removeHTMLTag(str) {
  str = str.replace(/<\/?[^>]*>/g, ""); //去除HTML tag
  str = str.replace(/[ | ]*\n/g, "\n"); //去除行尾空白
  str = str.replace(/\n[\s| | ]*\r/g, "\n"); //去除多余空行
  str = str.replace(/&nbsp;/gi, ""); //去掉&nbsp;
  return str;
}

方法二：使用第三方库

除了手动编写正则表达式之外，我们也可以使用第三方库来去除富文本中的 html 标签。比如说，dompurify 库就可以轻松去除富文本中的所有危险标签。具体实现代码如下：

import DOMPurify from "dompurify";

const cleanHtml = DOMPurify.sanitize(dirtyHtml, {
  ALLOWED_TAGS: ["p", "b", "i", "em", "strong", "a", "ul", "ol", "li", "img"],
});

去除 vue、react、微信小程序中的过滤器

方法一：使用自定义过滤器

在 Vue、React、微信小程序等框架中，我们可以通过编写自定义过滤器来去除指定的字符或标签。以下是 Vue 中去除指定标签的示例代码：

Vue.filter("removeHtmlTag", function (value) {
  //去除HTML tag的正则表达式
  return value.replace(/<[^>]+>/g, "");
});

方法二：使用第三方库

同样地，我们也可以使用第三方库来快速去除 vue、react、微信小程序等框架中的过滤器。比如说，lodash 库中的 _.escape 方法就可以帮助我们去除指定字符，例如 &、< 和 >。具体实现代码如下：

import _ from "lodash";

const unescapedHtml = _.unescape(escapedHtml);

以上是去除富文本中的 html 标签及 vue、react、微信小程序中的过滤器的完整攻略，希望能够帮助到你。