Nodejs 如何解析HTML的DOM元素

Nodejs 如何解析HTML的DOM元素

像JSDOM和JQUERY结合的，还有CHEERIO这些包都能解析DOM。具体有什么算法么？

6 回复

Node.js 如何解析 HTML 的 DOM 元素

在 Node.js 中，有多种库可以帮助我们解析 HTML 并提取 DOM 元素。其中比较流行的包括 cheerio、jsdom 和 parse5。这些库提供了类似于 jQuery 的语法来操作和解析 HTML 文档。

1. 使用 cheerio

cheerio 是一个轻量级的库，它的 API 设计灵感来自于 jQuery，非常适合处理 HTML 文档。以下是一个简单的示例：

const cheerio = require('cheerio');

// 假设这是你要解析的HTML字符串
const htmlString = `
<!DOCTYPE html>
<html>
<head>
    <title>Sample Page</title>
</head>
<body>
    <h1>Welcome to the Sample Page</h1>
    <p class="description">This is a sample paragraph.</p>
    <div id="content">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </div>
</body>
</html>
`;

// 加载HTML字符串到cheerio对象中
const $ = cheerio.load(htmlString);

// 获取所有<p>标签的内容
const paragraphs = $('p').map((index, element) => $(element).text()).get();
console.log(paragraphs); // 输出: ["This is a sample paragraph."]

// 获取id为content的<div>下的<li>标签
const items = $('#content li').map((index, element) => $(element).text()).get();
console.log(items); // 输出: ["Item 1", "Item 2", "Item 3"]

2. 使用 jsdom

jsdom 是一个完整的浏览器环境模拟器，它允许你在 Node.js 中使用 DOM 操作。以下是使用 jsdom 解析 HTML 的示例：

const { JSDOM } = require('jsdom');

const htmlString = `
<!DOCTYPE html>
<html>
<head>
    <title>Sample Page</title>
</head>
<body>
    <h1>Welcome to the Sample Page</h1>
    <p class="description">This is a sample paragraph.</p>
    <div id="content">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </div>
</body>
</html>
`;

// 创建一个新的JSDOM实例
const dom = new JSDOM(htmlString);
const document = dom.window.document;

// 获取所有<p>标签的内容
const paragraphs = Array.from(document.querySelectorAll('p')).map(p => p.textContent);
console.log(paragraphs); // 输出: ["This is a sample paragraph."]

// 获取id为content的<div>下的<li>标签
const contentDiv = document.querySelector('#content');
const items = Array.from(contentDiv.querySelectorAll('li')).map(li => li.textContent);
console.log(items); // 输出: ["Item 1", "Item 2", "Item 3"]

总结

cheerio 和 jsdom 都是强大的工具，用于在 Node.js 中解析和操作 HTML 文档。cheerio 更轻量且更易于上手，而 jsdom 则提供了更全面的浏览器环境模拟。根据你的需求选择合适的库，可以大大简化 HTML 解析的过程。


你要做什么？

  1. 0 用正则解析吧？

…我是想说“0. 0 用正则解析吧”。结果markdown把我就解析成那德行了。

不用现成的，你要做词法分析？

http://en.wikipedia.org/wiki/Lexical_analysis

要解析HTML的DOM元素，可以使用一些流行的Node.js库，如cheerio、jsdom等。这些库提供了类似于jQuery的功能，可以方便地对HTML文档进行操作。

使用 cheerio

cheerio 是一个轻量级的库，它模仿了jQuery的API，非常适合用于服务器端解析HTML。以下是一个简单的示例：

  1. 首先安装 cheerio：

    npm install cheerio

  2. 示例代码：

    const cheerio = require('cheerio');

// 假设这是你要解析的HTML字符串
const html = `
<html>
  <head><title>Page Title</title></head>
  <body>
    <h1>Main Header</h1>
    <p>This is a paragraph.</p>
    <div class="content">
      <span>Inner span text</span>
    </div>
  </body>
</html>
`;

// 加载HTML并解析
const $ = cheerio.load(html);

// 获取页面标题
console.log($('title').text()); // 输出: Page Title

// 获取第一个段落文本
console.log($('p').text()); // 输出: This is a paragraph.

// 获取所有带有class="content"的div的内容
console.log($('.content').html()); // 输出: <span>Inner span text</span>

// 获取所有的span文本
$('span').each((index, element) => {
  console.log($(element).text());
});

使用 jsdom

jsdom 是一个完整的Web浏览器环境，支持所有标准的Web API。如果你需要更全面的支持，可以选择 jsdom。

  1. 首先安装 jsdom：

    npm install jsdom

  2. 示例代码：

    const { JSDOM } = require('jsdom');

// 假设这是你要解析的HTML字符串
const html = `
<html>
  <head><title>Page Title</title></head>
  <body>
    <h1>Main Header</h1>
    <p>This is a paragraph.</p>
    <div class="content">
      <span>Inner span text</span>
    </div>
  </body>
</html>
`;

// 创建一个新的JSDOM实例
const dom = new JSDOM(html);

// 访问全局window对象
const document = dom.window.document;

// 获取页面标题
console.log(document.querySelector('title').textContent); // 输出: Page Title

// 获取第一个段落文本
console.log(document.querySelector('p').textContent); // 输出: This is a paragraph.

// 获取所有带有class="content"的div的内容
const contentDivs = document.querySelectorAll('.content');
contentDivs.forEach(div => {
  console.log(div.innerHTML); // 输出: <span>Inner span text</span>
});

// 获取所有的span文本
const spans = document.querySelectorAll('span');
spans.forEach(span => {
  console.log(span.textContent);
});

总结

  • cheerio 轻量且快速，适合服务器端解析。
  • jsdom 功能更全，但相对重量级，适合需要完整浏览器环境的场景。

希望以上示例代码能帮助你更好地理解和使用这些工具来解析HTML DOM元素。

回到顶部