在前端开发中，有时我们需要从 HTML 中提取纯文本信息，例如进行搜索、过滤、统计等操作。虽然可以手动复制粘贴，但若有大量的 HTML 内容需要处理，则显然不是一种高效的方式。那么，如何以编程方式获取 HTML 元素的纯文本呢？本文将介绍 JavaScript 中一些常见的实现方法。
方法一：使用 innerText 属性
对于大多数 HTML 元素来说，都有一个 innerText 属性，它返回元素的纯文本内容（不包括 HTML 标签）。例如：
<div id="myDiv">Hello, <strong>world!</strong></div>
const myDiv = document.getElementById('myDiv');
const text = myDiv.innerText; // "Hello, world!"可以看到，innerText 返回了 "Hello, world!"，而不是 "Hello, <strong>world!</strong>"。这个方法的优点是简单易用，但它也有一些局限性。首先，它只适用于大部分标准 HTML 元素，而不适用于像 input、textarea 这样的表单元素；其次，它会忽略 CSS 样式中的 display:none 属性，因此可能会返回不正确的结果。
方法二：使用 textContent 属性
与 innerText 类似，textContent 属性也可以返回元素的纯文本内容。它与 innerText 的区别在于，textContent 返回的是所有子节点的文本内容，包括注释和空格等。
<div id="myDiv">Hello, <!-- comment -->world!</div>
const myDiv = document.getElementById('myDiv');
const text = myDiv.textContent; // "Hello, world!"可以看到，text 返回了 "Hello, world!"，而不是 "Hello, <!-- comment -->world!"。这个方法的优点是能够获取更全面的文本信息，但缺点是可能会返回一些不需要的内容。
方法三：使用 DOMParser 解析器
如果我们需要精确控制从 HTML 中提取纯文本的过程，可以使用 DOMParser 解析器。它可以将 HTML 字符串解析成一个 DOM 文档，然后我们就可以通过遍历 DOM 树来获取所需的文本。注意，该方法需要浏览器支持 DOMParser API。
<div id="myDiv">Hello, <strong>world!</strong></div>
const html = document.getElementById('myDiv').innerHTML;
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
const text = doc.body.textContent; // "Hello, world!"可以看到，我们首先获取了元素的 innerHTML 属性，然后通过 DOMParser 解析器将其转换为 DOM 对象。最后，我们获取了文档的 body 元素，并调用其 textContent 属性来获取纯文本内容。
这个方法的优点在于灵活性高，可以精确控制提取文本的过程，同时可以处理复杂的 HTML 结构。缺点是需要编写较多的代码，并且可能会影响性能。
方法四：使用第三方库
除了以上三种方法外，我们还可以使用第三方库来帮助我们提取 HTML 的纯文本内容。例如，jQuery 库提供了一个 text() 方法，可以返回元素的纯文本内容；而 Cheerio 库则可以在 Node.js 中模拟浏览器环境，以便于对 HTML 进行操作。这些库的优点在于易用性高，但缺点在于可能会增加项目的依赖和体积。
<div id="myDiv">Hello, <strong>world!</strong></div>
const html = $('#myDiv').text(); // "Hello
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/11559) ，转载请注明来源
[https://www.javascriptcn.com/post/11559](https://www.javascriptcn.com/post/11559)