尝试对节点 js 使用 DOMParser

在我的 js 代码中尝试使用 DOMParser 时遇到了一些问题。在我的代码中，我通过 xmlhttp.response seText 肥皂响应检索 xml 文件。我希望能够访问它的元素的 JSON 格式，所以我的代码看起来像:

var xml = new DOMParser();
xml = xml.parseFromString(xmlhttp.responseText, 'text/xml');
var result = xmlToJson(xml);

我得到这个错误消息: ReferenceError: 未定义 DOMParser

编辑: 这个链接对我不起作用，因为我的 javascript 不在 HTML 页面中，因为它是一个 node.js 文件。JavaScriptDOMParser 访问 innerHTML 和其他属性

131183 次浏览
小开

Js 中没有 DOMParser，这是浏览器的特性，不过你可以尝试下面的任何一个模块:

Https://github.com/joyent/node/wiki/modules#wiki-parsers-xml

小开 
var DOMParser = require('xmldom').DOMParser;
var doc = new DOMParser().parseFromString(
'<xml xmlns="a" xmlns:c="./lite">\n'+
'\t<child>test</child>\n'+
'\t<child></child>\n'+
'\t<child/>\n'+
'</xml>'
,'text/xml');
小开

可以使用 DOMParser 的 Node 实现，例如 Xmldom。这将允许您在浏览器之外访问 DOMParser。例如:

var DOMParser = require('xmldom').DOMParser;
var parser = new DOMParser();
var document = parser.parseFromString('Your XML String', 'text/xml');
小开

我真的很喜欢 Htmlparser2。它是一个奇妙的、快速的、轻量级的库。我已经创建了一个关于如何在 RunKit: https://runkit.com/jfahrenkrug/htmlparser2-demo/1.0.0上使用它的小演示

小开

我使用 Jsdom是因为它有很多用法，而且是由一个著名的网络英雄写的——没有保证它的行为完全匹配你的浏览器(甚至每个浏览器的行为都是相同的) ，但它对我很有用:

const jsdom = require("jsdom")
const { JSDOM } = jsdom
global.DOMParser = new JSDOM().window.DOMParser
小开
最佳答案

很多浏览器功能，比如 DOM 操作或者 XHR，本身是不可用的，因为 NodeJS 不是一个典型的访问 DOM 的服务器任务——您必须使用一个外部库才能做到这一点。

DOM 容量在很大程度上取决于库，下面是可以使用的主要工具的快速比较:

  • jsdom : 实现 DOM level 4，也就是 最新的 DOM 标准，所以在现代浏览器上可以做的所有事情，都可以在 jsdom中完成。它是在 Node 上进行浏览器操作的事实上的行业标准，被 Mocha、 Vue Test Utils、 Webpack Prerender SPA Plugin 和许多其他工具所使用:

    const jsdom = require("jsdom");
const dom = new jsdom.JSDOM(`<!DOCTYPE html><p>Hello world</p>`);
dom.window.document.querySelector("p").textContent; // 'Hello world'

  • deno_dom : 如果选择使用 Deno 代替 Node，这个库提供了 DOM 解析功能:

    import { DOMParser } from "https://deno.land/x/deno_dom/deno-dom-wasm.ts";
const parser = new DOMParser();
const document = parser.parseFromString('<p>Hello world</p>', 'text/html');
document.querySelector('p').textContent; // 'Hello world';

  • htmlparser2 : 与 jsdom 相同，但以更复杂的 API 为代价提高了性能和灵活性:

    const htmlparser = require("htmlparser2");
const parser = new htmlparser.Parser({
onopentag: (name, attrib) => {
if (name=='p') console.log('a paragraph element is opening');
}
}, {decodeEntities: true});
parser.write(`<!DOCTYPE html><p>Hello world</p>`);
parser.end();
// console output: 'a paragraph element is opening'

  • cheerio : 由 htmlparser2实现基于 HTML DOM 解析的 jQuery:

    const cheerio = require('cheerio');
const $ = cheerio.load(`<!DOCTYPE html><p>Hello world</p>`);
$('p').text('Bye moon');
$.html(); // '<!DOCTYPE html><p>Bye moon</p>'

  • xmldom : 完全实现 DOM 级别2，部分实现 DOM 级别3。可以使用 HTML，也可以使用 XML

  • dom-parser : 基于正则表达式的 DOM 解析器，实现了一些像 getElementById这样的 DOM 方法。由于使用正则表达式解析 HTML 是 一个非常糟糕的主意，因此我不推荐使用这种方法进行生产。

小开

我还使用了另一个 DOM 解析器，从 html 字符串到 DOM，然后返回 > 喜马拉雅，或者在 Npmjs.com:

import { parse, stringify } from 'himalaya';


const dom = parse(htmlString)


// Do something here


const htmlStringNext = stringify(dom)
小开

RSS 解析器 很容易解析 Atom 提要。例如，你可以简单地使用 NextJs 创建一个 API，如下所示:

import Parser from 'rss-parser'


export default async function API(req, res) {
let parser = new Parser();
try {
const feed = await parser.parseURL(`https://www.nasa.gov/rss/dyn/lg_image_of_the_day.rss`);
if (feed) return res.json({ "message": `Here is your data feed title`, status: 200, data: feed.title })
} catch (error) {
return res.json({ "message": "You made an invalid request", status: 401 })
}
}

提交答案