前端 JavaScript 从 HTML 字符串中提取文本的技巧汇总

2023-09-21 18:09:32

引言

在前端开发中，我们经常会遇到需要从 HTML 字符串中提取文本的情况，例如从服务器端获取的HTML代码中提取特定内容。

要从 HTML 字符串中提取文本，有很多种方法，其中最常用的方法之一就是使用正则表达式。

1. 使用正则表达式

正则表达式是一种用来匹配字符串的强大工具，我们可以使用正则表达式来从 HTML 字符串中提取文本。

这里是一个简单的例子：

const html = '<p>Hello, world!</p>';
const text = html.match(/<p>(.*)<\/p>/);
console.log(text[1]); // "Hello, world!"

这个正则表达式匹配了一个 HTML 段落元素，并提取了段落元素中的文本。

如果 HTML 字符串中包含多个需要提取的文本，我们可以使用正则表达式的 g 标志来匹配所有匹配项。

const html = '<p>Hello, world!</p><p>Welcome to JavaScript!</p>';
const text = html.match(/<p>(.*)<\/p>/g);
console.log(text); // ["Hello, world!", "Welcome to JavaScript!"]

2. 使用 DOM 解析

DOM（文档对象模型）是 W3C 标准的一个组成部分，它将 HTML 文档表示为一个由节点和对象组成的树形结构。我们可以使用 DOM 解析来从 HTML 字符串中提取文本。

这里是一个简单的例子：

const html = '<p>Hello, world!</p>';
const doc = new DOMParser().parseFromString(html, 'text/html');
const text = doc.documentElement.textContent;
console.log(text); // "Hello, world!"