JS如何删除<开头>结尾内容 提取HTML文档中的纯文本

方案1：正则表达式快速实现 #

适合结构简单的HTML场景，代码逻辑好理解，非常适合初学者上手：

function getPureTextFromHtml(htmlStr) {
  // 匹配所有<开头>结尾的HTML标签，替换为空
  let text = htmlStr.replace(/<[^>]+>/g, '');
  // 把连续的换行、空格、制表符统一替换为单个空格，再去掉首尾多余空格
  text = text.replace(/\s+/g, ' ').trim();
  return text;
}

测试效果：

// 示例输入
const inputHtml = `<p>Random text generated by some method</p>
<p style="text-align:center;">centered text example</p>
<p>Full name</p>
<p>IRSP</p>`;

console.log(getPureTextFromHtml(inputHtml));
// 输出完全符合预期：Random text generated by some method centered text example Full name IRSP

注意：正则方案存在极小概率的匹配异常，比如HTML标签的属性值里包含>字符时，会出现匹配错误，复杂场景建议用下面的DOM方案。

方案2：DOM API实现（更稳妥） #

利用浏览器原生的HTML解析能力，完全避免正则的边缘case问题，兼容性和容错率更高：

function getPureTextFromHtml(htmlStr) {
  // 创建一个临时的DOM元素
  const tempEle = document.createElement('div');
  // 把待处理的HTML内容赋值给临时元素的innerHTML
  tempEle.innerHTML = htmlStr;
  // 直接读取textContent属性就能得到所有纯文本内容
  let text = tempEle.textContent || tempEle.innerText || '';
  // 处理多余空格
  text = text.replace(/\s+/g, ' ').trim();
  return text;
}

相关学习要点 #

• 正则部分：可以重点学习全局匹配修饰符、字符组匹配、贪婪匹配的规则，熟练后可以自己实现绝大多数常见的文本处理需求。
• DOM操作部分：可以了解createElement、innerHTML、textContent等常用DOM API的用法，这是JS操作页面内容的核心基础知识点。

内容的提问来源于stack exchange，提问作者Alexis Fernandez