从html字符串提取纯文本

目前常用的有两种方法;

正则过滤

这种办法比较简单粗暴

1
return htmlString.replace(/<[^>]*>|/g, "");

innerText/textContent 过滤

这种办法是先将 html 字符串转换成 dom 节点,然后用内置的 innerText/textContent 方法提取纯文本。

1
2
3
let ele = document.createElement("div");
ele.innerHTML = htmlString;
return ele.innerText || ele.textContent;

但是这俩种办法都有一个缺点就是无法过滤转义过的 html 字符串。
比如这段字符串&lt;button onclick="console.log('1')"&gt;文本&lt;/button&gt;
解决办法就是把两种方法结合,先用innerText方法过滤,然后再用正则方法过滤。代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
/**
* @description 从html字符串中提取纯文本
* @export
* @param {string} htmlString
* @returns
*/
function replaceHtmlToText(htmlString) {
let ele = document.createElement("div");
ele.innerHTML = htmlString;
let text = ele.innerText || ele.textContent;
// 二次过滤
return text.replace(/<[^>]*>|/g, "");
}