在 Node.js 中使用 htmlparser2 选择 html 节点的文本内容

Question

我想用 Node.js 的 htmlparser2 模块解析一些 html。我的任务是通过ID找到一个精确的元素并提取它的文本内容。

我已经阅读了 documentation（非常有限）并且我知道如何使用 onopentag 函数设置我的解析器，但它只允许访问标签名称及其属性（我看不到文本）。 ontext 函数从给定的 html 字符串中提取所有文本节点，但忽略所有标记。

这是我的代码。

const htmlparser = require("htmlparser2");
const file = '<h1 id="heading1">Some heading</h1><p>Foobar</p>';

const parser = new htmlparser.Parser({
  onopentag: function(name, attribs){
    if (attribs.id === "heading1"){
      console.log(/*how to extract text so I can get "Some heading" here*/);
    }
  },
   
  ontext: function(text){
    console.log(text); // Some heading \n Foobar
  }
});

parser.parseComplete(file);

我希望函数调用的输出是 'Some heading'。我相信有一些明显的解决方案，但不知怎的，我没有想到。

谢谢。

Answer 1

您可以使用您询问的库这样做：

const htmlparser = require('htmlparser2');
const domUtils = require('domutils');

const file = '<h1 id="heading1">Some heading</h1><p>Foobar</p>';

var handler = new htmlparser.DomHandler(function(error, dom) {
  if (error) {
    console.log('Parsing had an error');
    return;
  } else {
    const item = domUtils.findOne(element => {
      const matches = element.attribs.id === 'heading1';
      return matches;
    }, dom);

    if (item) {
      console.log(item.children[0].data);
    }
  }
});

var parser = new htmlparser.Parser(handler);
parser.write(file);
parser.end();

您将获得的输出是 "Some Heading"。但是，在我看来，您会发现使用专为它设计的查询库会更容易。你当然不需要这样做，但你可以注意到下面的代码是多么简单：How do I get an element name in cheerio with node.js

Cheerio 或 querySelector API 例如 https://www.npmjs.com/package/node-html-parser 如果您更喜欢本机查询选择器，则更精简。

您可以将该代码与更精简的代码进行比较，例如支持简单查询的 node-html-parser：

const { parse } = require('node-html-parser');

const file = '<h1 id="heading1">Some heading</h1><p>Foobar</p>';
const root = parse(file);
const text = root.querySelector('#heading1').text;
console.log(text);

在 Node.js 中使用 htmlparser2 选择 html 节点的文本内容

Selecting an html node's text content with htmlparser2 in Node.js

javascript

parsing

html-parsing

node.js