js 解析html字符串|极客笔记

js 解析html字符串

在前端开发中，我们经常会遇到需要解析HTML字符串的情况。例如，我们可能需要从后端接口获取到一段HTML代码，然后使用JavaScript操作这段代码，提取出我们需要的信息。本文将详细介绍如何使用JavaScript解析HTML字符串。

1. 使用原生JavaScript解析HTML字符串

原生JavaScript提供了一些方法可以帮助我们解析HTML字符串，最常用的是使用DOMParser对象。DOMParser对象可以将一个字符串解析成一个DOM文档，然后我们可以通过操作DOM来提取我们需要的信息。

下面是一个简单的示例，展示如何使用DOMParser解析HTML字符串并获取其中的文本内容：

const htmlString = '<div><p>Hello World!</p></div>';
const parser = new DOMParser();
const doc = parser.parseFromString(htmlString, 'text/html');
const textContent = doc.body.textContent;

console.log(textContent);

上面的代码会输出：”Hello World!”，即提取出了HTML字符串中的文本内容。

2. 使用第三方库解析HTML字符串

除了原生的方法外，我们还可以使用一些第三方库来解析HTML字符串。其中，比较流行的库有cheerio和jsdom。这两个库都提供了类似于jQuery的API，方便我们对HTML文档进行操作。

下面是一个使用cheerio库解析HTML字符串的示例：

const cheerio = require('cheerio');
const htmlString = '<div><p>Hello World!</p></div>';
const  $= cheerio.load(htmlString); const textContent =$ ('p').text();

console.log(textContent);

上面的代码同样会输出：”Hello World!”，使用cheerio库可以更方便地操作HTML文档。

3. 解析HTML中的属性

在HTML字符串中，除了文本内容外，还包含了标签的属性。我们可能也需要解析这些属性，例如获取标签的class、id等信息。下面是一个示例，展示如何使用原生JavaScript获取HTML标签的属性：

const htmlString = '<a href="https://www.example.com" class="link">Example</a>';
const parser = new DOMParser();
const doc = parser.parseFromString(htmlString, 'text/html');
const link = doc.querySelector('a');
const href = link.getAttribute('href');
const className = link.getAttribute('class');

console.log(href, className);

上面的代码会输出：”https://www.example.com link”，即成功获取了a标签的href和class属性。