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

Question

我是 jsdom 的新手，我只想在节点服务中使用 draft 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.

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

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。

Answer 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' ] } }
}());

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

span and strong tags are not working in jsdom

javascript

jquery

node.js

jsdom

draftjs