将 HTML 字符串变成有组织的 Object

Question

朗：节点 JS

我正在使用文本编辑器，我得到了这样的 output 字符串

<p>This is <strong>a <a href="#">test</a></strong></p>

但可能是不同的 HTML 标签，如 H1、H2 等，但没有什么比实际的 HTML 文本标签更特别的了。

现在我想将该字符串转换为 object，我可以使用它并将其发送到我的数据库。 所以完美的方式是将它变成这样的东西......

[{type: "text", text: "This is ", bold: false}, {type: "text", text: "a  ", bold: true}, {type: "link", text: "test", bold: true, href: "#}]

等等。

我尝试了正则表达式方法并将其拆分并执行各种逻辑以变成结构化的 object 但这不是最好的方法，因为如果我将来编写<h1>Test</h1>它会失败<h1>Test</h1>中间的文字为例。

你会如何处理这个问题？

Answer 1

如果你想 go 容易， jsdom或htmlparser2和domhandler会帮助做到这一点。 例如，使用htmlparser2和domhandler （来自我的一些应用程序）：

// Parsers helpers
import { Parser } from 'htmlparser2';
import { DomHandler } from 'domhandler';

// Get all text contents, recursively
const getAllText = (node) => {
  return node.children.map( n => {
    if (n.type === 'text') {
      return n.data.trim("\n\r ");
    }

    // Discard `small` tags
    if (n.name === 'small') {
      return ''
    }

    return getAllText(n);
  }).join('')
}

// Parses HTML data containing a UL/LI/A tree
const parseMenu = (data) => {

  const parseLink = (link) => {
    const name = getAllText(link);
    const code = link.attribs['data-value']?.trim("\n\r ");
    return {
      name,
      ...(code ? {code} : {}),
    }
  }

  const parseLi = (li) => {
    const ul = li.children.find(({type, name}) => type === 'tag' && name === 'ul' );
    const link = li.children.find(({type, name}) => type === 'tag' && name === 'a' );
    return {
      ...(link ? parseLink(link) : {}),
      ...(ul ? {children:  parseUl(ul)} : {}),
    }
  }

  const parseUl = (ul) => {
    return ul.children.filter(({type, name}) => type === 'tag' && name === 'li' ).map( child => {
      return parseLi(child);
    });
  }

  let result;
  const handler = new DomHandler( (error, dom) => {
    if (error) {
      // Handle error
    } else {
      // Parsing completed, do something
      result = parseUl(dom[0]);
    }
  });

  const parser = new Parser(handler);
  parser.write(data);
  parser.end();
  return result;
}

Answer 2

使用cheerio 库（或您选择的任何其他html 解析器库）并根据需要操作“DOM 节点”object。