如何使用htmlparser2转换html中的内容答案

【问题标题】：How to use htmlparser2 to convert content in html如何使用htmlparser2转换html中的内容
【发布时间】：2021-01-23 10:37:29
【问题描述】：

我需要在nodejs环境中将html中的“textContent”和“title”文本反转，怎么办

这是我当前的代码，htmlparser2": "^6.0.0

import * as htmlparser2 from "htmlparser2";

let data = `
<!DOCTYPE html>
<html>
  <body title="hello" class="d-flex">
    body
    <h1>abc</h1>
    <p>def</p>
  </body>
</html>
`;

const reverse = (str: string) => str.split("").reverse().join("");

var handler = new htmlparser2.DomHandler(function (error, tree) {
  //...
});

var parser = new htmlparser2.Parser(handler);
parser.parseComplete(data);

希望转换后能得到这个结果

<!DOCTYPE html>
<html>
  <body title="olleh" class="d-flex">
    ydob
    <h1>cba</h1>
    <p>fed</p>
  </body>
</html>

谢谢❤️

【问题讨论】：

我实际上不确定您的问题是什么，我将您所拥有的内容准确地粘贴到 StackBlitz application 中，它给了我您想要的输出。

标签： html html-parsing

【解决方案1】：

我花了一些时间构建这个库来解决这个问题。 html-static

import { AstAttrbute, AstText, htmlAst, traverse } from "html-static";

let data = `
<!DOCTYPE html>
<html>
  <body title="hello">
    body
    <h1 id="app">abc</h1>
    <p class='foo'>def</p>
  </body>
</html>
`;

const ast = htmlAst(data);

const reverse = (str) => str.split("").reverse().join("");

traverse(ast, {
  text(text: AstText) {
    text.value = reverse(text.value);
  },
  attr_title(attr: AstAttrbute) {
    attr.value = reverse(attr.value);
  },
}).then((_) => {
  console.log(ast.toString());
});

最后我得到了这个结果

<!DOCTYPE html><html><body title="olleh">ydob<h1 id="app">cba</h1><p class="foo">fed</p></body></html>

【讨论】：