从字符串 html 中提取内容 - Javascript

在前端开发中，我们经常需要从 HTML 字符串中获得特定标签的内容，这在数据爬取、文本解析等场景下尤为常见。下面将介绍如何使用 JavaScript 从字符串 html 中提取内容。

1. 使用正则表达式提取标签内容

正则表达式可以帮助我们从 HTML 字符串中匹配出指定的标签，并提取其中的内容。例如，我们可以使用以下正则表达式提取 div 标签中的文本内容：

const html = '<div>hello, world!</div>';
const regex = /<div>(.+)<\/div>/;
const matches = html.match(regex);
if (matches) {
  const content = matches[1];
  console.log(content); // 输出：'hello, world!'
}

上述代码中，通过正则表达式 <div>(.+)<\/div>，我们可以匹配出 <div> 开头，</div> 结束，中间为任意字符的文本。匹配到的字符串会被放入 matches 数组中，我们可以通过 matches[1] 获取到匹配到的内容。

需要注意的是，上述代码仅仅适用于匹配单个标签，并且标签中没有子标签的情况。如果我们需要匹配复杂的 HTML 文档，或者标签中包含了子标签，那么正则表达式的方式就显得非常麻烦，甚至是不可行的。

2. 使用 DOM 解析器提取标签内容

JavaScript 提供了一组强大的 DOM（Document Object Model，文档对象模型） API，可以将 HTML 字符串解析成一个文档对象模型树，我们可以通过 DOM API 对树中的标签进行遍历并获取其中的内容。

const html = '<div><p>hello, world!</p></div>';
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
const content = doc.querySelector('div').textContent;
console.log(content); // 输出：'hello, world!'

上述代码中，我们首先将 HTML 字符串解析成一个文档对象模型树 doc，然后使用 querySelector 方法获取到 div 标签，最后使用 textContent 属性获取标签的文本内容。

需要注意的是，DOM API 解析 HTML 字符串会比正则表达式方法稍微耗费一些性能，但同时也更加灵活，它可以正确地处理嵌套标签的情况。

3. 总结

以上介绍了 JavaScript 中从字符串 html 中提取内容的两种方式：正则表达式和 DOM 解析器。两种方式各有优劣，开发者可以根据具体场景选择合适的方法。