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

Question

我需要在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>

谢谢❤️

Answer 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>

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

How to use htmlparser2 to convert content in html

html

html-parsing