programing

노드 js와 함께 DOMParser를 사용하려고 합니다.

bestprogram 2023. 9. 4. 20:27

노드 js와 함께 DOMParser를 사용하려고 합니다.

JS 코드에서 DOMParser를 사용할 때 문제가 발생했습니다.내 코드에서 xmlhttp.responseTextsoap 응답을 통해 xml 파일을 검색합니다.JSON 형식으로 요소에 액세스할 수 있기를 원하므로 코드는 다음과 같습니다.

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

다음 오류 메시지가 표시됩니다.참조 오류: DOMParser가 정의되지 않았습니다.

편집: 내 자바스크립트가 node.js 파일이기 때문에 HTML 페이지에 없기 때문에 이 링크가 작동하지 않습니다.JavaScript DOMParser 액세스 내부HTML 및 기타 속성

DOM 조작 또는 XHR과 같은 많은 브라우저 기능은 기본적으로 Node에서 사용할 수 없습니다.JS는 DOM에 접근하기 위한 일반적인 서버 작업이 아니기 때문에 외부 라이브러리를 사용해야 합니다.

DOM 용량은 라이브러리에 따라 크게 다릅니다. 다음은 사용할 수 있는 주요 도구를 간단히 비교한 것입니다.

  • 최신 DOM 표준인 DOM 레벨 4를 jsdom구현하므로 최신 브라우저에서 수행할 수 있는 모든 작업을 에서 수행할 수 있습니다.jsdomMocha, 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'
    
  • Node 대신 Deno를 사용하는 것이 옵션인 경우 이 라이브러리는 DOM 구문 분석 기능을 deno_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';
    
  • jsdom과 동일하지만 보다 복잡한 API의 가격으로 향상된 성능과 유연성을 htmlparser2제공합니다.

    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'
    
  • HTML DOM 구문 분석에 기반한 jQuery cheerio구현htmlparser2:

    const cheerio = require('cheerio');
    const $ = cheerio.load(`<!DOCTYPE html><p>Hello world</p>`);
    $('p').text('Bye moon');
    $.html(); // '<!DOCTYPE html><p>Bye moon</p>'
    
  • xmldomDOM 레벨 2를 완전히 구현하고 DOM 레벨 3을 부분적으로 구현합니다.HTML과 함께 작동하며 XML과도 함께 작동합니다.

  • dom-parser정규식 기반 DOM 파서는 다음과 같은 몇 가지 DOM 방법을 구현합니다.getElementById정규 표현식으로 HTML을 구문 분석하는 것은 매우 좋지 않은 생각이기 때문에 프로덕션에 이 표현식을 추천하지 않습니다.

는 jsdom을 사용했습니다. 왜냐하면 그것은 많은 사용법을 가지고 있고 저명한 웹 영웅에 의해 쓰여졌기 때문입니다. 그것의 행동이 당신의 브라우저와 완벽하게 일치한다는 약속은 없었지만(또는 심지어 모든 브라우저의 행동이 똑같다는 것도) 저에게는 효과가 있었습니다.

const jsdom = require("jsdom")
const { JSDOM } = jsdom
global.DOMParser = new JSDOM().window.DOMParser

xmldom과 같은 DOMParser의 Node 구현을 사용할 수 있습니다.이렇게 하면 브라우저 외부에서 DOMParser에 액세스할 수 있습니다.예:

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

.DOMParser브라우저 thing.node.js입니다.다음 모듈 중 하나를 사용할 수 있습니다.

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

저는 htmlparser2를 정말 좋아합니다.그것은 환상적이고 빠르고 가벼운 도서관입니다.RunKit에서 사용하는 방법에 대한 작은 데모를 만들었습니다. https://runkit.com/jfahrenkrug/htmlparser2-demo/1.0.0

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');

저는 html 문자열에서 DOM으로 그리고 다시 > 히말라야, 또는 npmjs.com 에서 또 다른 DOM 파서를 사용합니다.

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 })
    }
}

나는 필요했습니다.DOMParser노드에이것이 제가 사용한 것입니다.

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

class DOMParser {
  parseFromString(s, contentType = 'text/html') {
    return new JSDOM(s, {contentType}).window.document;
  }
}

이제대답의 예는 저에게 효과가 있습니다.

function htmlDecode(input) {
  var doc = new DOMParser().parseFromString(input, "text/html");
  return doc.documentElement.textContent;
}

console.log(  htmlDecode("&lt;img src='myimage.jpg'&gt;")  )    
// "<img src='myimage.jpg'>"

언급URL : https://stackoverflow.com/questions/11398419/trying-to-use-the-domparser-with-node-js