react解析html字符串方法实现

function MyComponent() {
  const htmlString = "<p>Hello, world!</p>";
  return <div dangerouslySetInnerHTML={{ __html: htmlString }} />;
}

import ReactHtmlParser from 'react-html-parser';

function MyComponent() {
  const htmlString = "<p>Hello, world!</p>";
  return <div>{ReactHtmlParser(htmlString)}</div>;
}

function MyComponent() {
  const htmlString = "<p>Hello, world!</p>";
  const htmlTags = htmlString.match(/<[^>]*>/g);
  const reactElements = htmlTags.map((tag) => {
    const tagName = tag.match(/<(w+)/)[1];
    const props = {};
    const attributes = tag.match(/w+="[^"]*"/g) || [];
    attributes.forEach((attribute) => {
      const [key, value] = attribute.split('=');
      props[key] = value.replace(/"/g, '');
    });
    return React.createElement(tagName, props, []);
  });
  return <div>{reactElements}</div>;
}

const sanitizeHtml = require('sanitize-html');

const html = '<div><h1>Title</h1><p>Paragraph #1</p><p>Paragraph #2</p></div>';
const purifiedHtml = sanitizeHtml(html);
console.log(purifiedHtml);

const sanitizeHtml = require('sanitize-html');

const html = '<div><img src="image.jpg" alt="My Image"></div>';
const options = {
  allowedAttributes: {
    img: ['src', 'alt'],
  },
};
const purifiedHtml = sanitizeHtml(html, options);
console.log(purifiedHtml);

// 1.安装  npm install parse5

const parse5 = require('parse5');

// 2.在Node.js中使用parse5解析HTML代码
const html = '<div><h1>Title</h1><p>Paragraph #1</p><p>Paragraph #2</p></div>';
const ast = parse5.parse(html);
console.log(ast);

// 3.对AST进行操作和过滤
const html = '<div><h1>Title</h1><p>Paragraph #1</p><script>alert("Hello, world!");</script><p>Paragraph #2</p></div>';
const ast = parse5.parse(html);

function filterScripts(node) {
  if (node.nodeName === 'script') {
    return parse5.treeAdapters.default.createElement('template');
  }
}

parse5.treeAdapters.default.traverse(ast, {
  pre: filterScripts,
});

const filteredHtml = parse5.serialize(ast);
console.log(filteredHtml);