span 和 strong 标签在 jsdom 中不起作用答案

【问题标题】：span and strong tags are not working in jsdomspan 和 strong 标签在 jsdom 中不起作用
【发布时间】：2021-04-07 18:06:24
【问题描述】：

我是 jsdom 的新手，我只想在节点服务中使用草稿 js 将 html 标签转换为 json。我得到了用于转换的 jsdom，所以我一直在努力，所以普通标签工作正常，但有些标签不工作。这是我的代码。

    const { JSDOM } = jsdom;
    const { window } = new JSDOM();
    const { document } = (new JSDOM(`<!DOCTYPE html>`)).window;
    global.document = document;
    global.navigator = window.navigator
    global.HTMLElement = window.HTMLElement
    const djs = require('draft-js')
    const html = '<p>Hey this <span>editor</span> rocks ????</p>';
    const json=djs.convertToRaw(djs.ContentState.createFromBlockArray(djs.convertFromHTML(html)))
    console.log("Hello",json);
    var jQuery = require('jquery')(window);

它给了我错误

node:22923) UnhandledPromiseRejectionWarning: ReferenceError: Node is not defined
    at isElement (/home/ec2-user/environment/info-data-migration/node_modules/draft-js/lib/isElement.js:18:28)
    at isHTMLImageElement (/home/ec2-user/environment/info-data-migration/node_modules/draft-js/lib/isHTMLImageElement.js:20:10)
    at isValidImage (/home/ec2-user/environment/info-data-migration/node_modules/draft-js/lib/convertFromHTMLToContentBlocks.js:184:8)
    at ContentBlocksBuilder._toBlockConfigs (/home/ec2-user/environment/info-data-migration/node_modules/draft-js/lib/convertFromHTMLToContentBlocks.js:490:11)
    at ContentBlocksBuilder._toBlockConfigs (/home/ec2-user/environment/info-data-migration/node_modules/draft-js/lib/convertFromHTMLToContentBlocks.js:432:52)
    at ContentBlocksBuilder.addDOMNode (/home/ec2-user/environment/info-data-migration/node_modules/draft-js/lib/convertFromHTMLToContentBlocks.js:333:82)
    at Object.convertFromHTMLToContentBlocks [as convertFromHTML] (/home/ec2-user/environment/info-data-migration/node_modules/draft-js/lib/convertFromHTMLToContentBlocks.js:791:63)
    at Object.rawFromHTML (/home/ec2-user/environment/info-data-migration/controller/jsontoHTMLConverter.js:170:24)
    at Object.getCandidateTableData (/home/ec2-user/environment/info-data-migration/controller/candidate_fullfile.js:31:119)
    at process._tickCallback (internal/process/next_tick.js:68:7)
(node:22923) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:22923) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

有趣的事实代码在没有跨度标签的情况下工作。

const { JSDOM } = jsdom;
    const { window } = new JSDOM();
    const { document } = (new JSDOM(`<!DOCTYPE html>`)).window;
    global.document = document;
    global.navigator = window.navigator
    global.HTMLElement = window.HTMLElement
    const djs = require('draft-js')
    const html = '<p>Hey this rocks ????</p>';
    const json=djs.convertToRaw(djs.ContentState.createFromBlockArray(djs.convertFromHTML(html)))
    console.log("Hello",json);
    var jQuery = require('jquery')(window);

我需要将html数据转换成json。

【问题讨论】：

标签： javascript jquery node.js jsdom draftjs

【解决方案1】：

由于您将浏览器对象添加到节点的global，您还需要像这样添加Node 对象：

// [...]
global.HTMLElement = window.HTMLElement
global.Node = window.Node // <== Add this
// [...]

这是因为嵌套的 <span> 标记在 <p> 标记内创建了文本节点，而 Draft.js 正在解析这些。

我不知道您的代码的上下文，但如果您只是想将一个 HTML 字符串转换为 JSON/JS 对象，则使用 xml2js 之类的东西可能会更容易：

const util = require('util');
const parseString = util.promisify(require('xml2js').parseString); // `promisify` makes it possible to use `async/await`

(async function(){
    const obj = await parseString('<p>Hey this <span>editor</span> rocks ?</p>');
    console.log(obj); // { p: { _: 'Hey this  rocks ?', span: [ 'editor' ] } }
}());

【讨论】：