【Vue】vue先转化文章内容再去除标签 vue filters过滤器去除标签 js提取文字内容

博客讲述了在渲染富文本页面时如何处理编辑器中的内容。通常遇到的问题是HTML标签导致布局和样式混乱。作者分享了一种方法，通过创建DOM元素并提取innerText或textContent来去除样式标签，从而只保留纯文本。这种方法可以解决样式问题，但可能无法处理某些古老符号。提供的解决方案包括使用过滤器函数来去除特定标签，并展示了去除标签后的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述

渲染页面的时候，往往会遇到富文本编辑器里面的文章。文章内容有排版、字体样式，等等。
但是我们要提取其中前三行作为展示内容，里面又有标签内容。如下图
在这里插入图片描述

原因分析：

如果我们要让页面自己识别其中的html标签，那就需要用到v-html
但是这样的话。
在这里插入图片描述
不仅仅是布局蹦了，样式也蹦了，我们只需要其中的文字即可，不需要其中的颜色样式。

就需要先把其中的内容，转换成v-html能识别的东西。其中的样式标签就没有了。然后我们再从中提取出text文字。
这是正确用法

我用过另一种用法，就是去除标签。

return html.replace(/<(p|div)[^>]*>(<br\/?>|&nbsp;)<\/\1>/gi, ' ')
					.replace(/<br\/?>/gi, ' ')
					.replace(/<[^>/]+>/g, '')
					.replace(/(\n)?<\/([^>]+)>/g, '')
					.replace(/\u00a0/g, ' ')
					.replace(/&nbsp;/g, ' ')
					.replace(/<img[^>]+src\\s*=\\s*['\"]([^'\"]+)['\"][^>]*>/g, '')
					.replace(/<\/?(img|table)[^>]*>/g, "") // 去除图片和表格
					.replace(/<\/?(a)[^>]*>/g, "") //  去除a标签

把它写在过滤器里面，那我们来看看去除标签之后的结果吧。
注意，用过滤器的话，标签就不能用v-html了
在这里插入图片描述
当我们用了这种方法之后，有一些空格标签之类的，去不掉

就会很头痛，然后我参考了大大小小很多的去除标签文章

解决方案：

我看到了下面的代码
在这里插入图片描述

filters: {
	// 去除标签
	setText(html) {
		let txt = document.createElement("div");
		txt.innerHTML = html;
		let content = txt.innerText || txt.textContent;
		txt = null;
		return content;
	}
}