HTML 使用JavaScript从HTML字符串中提取文本

在本文中，我们将介绍如何使用JavaScript从HTML字符串中提取文本。这在Web开发中非常有用，能够帮助我们处理和操作HTML内容。

阅读更多：HTML 教程

1. 正则表达式方法

正则表达式是一种强大的工具，可以用于在字符串中查找和提取特定的内容。在JavaScript中，我们可以使用正则表达式来提取HTML字符串中的文本。

下面是一个示例，演示如何使用正则表达式提取HTML字符串中的文本：

const htmlString = '<div><h1>Welcome to my website</h1><p>This is the main content of the page</p></div>';

const regex = /<[^>]+>/g;
const text = htmlString.replace(regex, '');

console.log(text);
// Output: Welcome to my website This is the main content of the page

在上面的示例中，我们首先定义了一个HTML字符串htmlString，其中包含了一些HTML标签，如<div>、<h1>和<p>等。然后，我们使用正则表达式/<[^>]+>/g来匹配所有HTML标签，并通过replace方法将其替换为空字符串，从而提取出了HTML字符串中的文本。

2. DOM方法

除了正则表达式方法之外，我们还可以使用DOM（文档对象模型）方法来提取HTML字符串中的文本。DOM是一种用于处理HTML和XML文档的API，它提供了一组操作文档内容的方法和属性。

下面是一个示例，展示了如何使用DOM方法提取HTML字符串中的文本：

const htmlString = '<div><h1>Welcome to my website</h1><p>This is the main content of the page</p></div>';

const parser = new DOMParser();
const doc = parser.parseFromString(htmlString, 'text/html');

const text = doc.body.textContent;

console.log(text);
// Output: Welcome to my website This is the main content of the page

在上面的示例中，我们首先使用DOMParser创建一个解析器对象，然后通过parseFromString方法将HTML字符串解析为文档对象doc。接下来，我们可以使用doc.body.textContent来获取解析后的HTML文档中的纯文本内容。

3. jQuery方法

如果你正在使用jQuery库，那么你也可以使用jQuery方法来提取HTML字符串中的文本。jQuery是一个流行的JavaScript库，它提供了一组简洁而强大的方法来处理HTML文档。

下面是一个示例，展示了如何使用jQuery方法提取HTML字符串中的文本：

const htmlString = '<div><h1>Welcome to my website</h1><p>This is the main content of the page</p></div>';

const text = $(htmlString).text();

console.log(text);
// Output: Welcome to my website This is the main content of the page