我有一个可以包含很多 html 标签的字符串。如何分别获取每个标签和字符串中的内容？答案

【问题标题】：I have a string that can contains a lot of html tags. How can I get separately each tag with the content from a string?我有一个可以包含很多 html 标签的字符串。如何分别获取每个标签和字符串中的内容？
【发布时间】：2022-11-20 04:20:48
【问题描述】：

我从 API 收到一个包含 html 标签的字符串。如何从字符串中提取它们并将它们放入 DOM 以作为单独的输入显示在页面上？例如 h2 的标题输入，段落的内容等字符串示例：

description: '<b>First option</b><p>Equals</p><h2>22</h2>'

该字符串可以包含以下标签：div、p、h1、h2、b

谢谢！

【问题讨论】：

body.InnerHTML = description;。或者使用另一个 HTMLElement。
抱歉，我稍微更改了我的问题以澄清它不是作为内容显示，而是将每个标签值划分为单独的输入。

标签： javascript reactjs regex dom transformation

【解决方案1】：

你可以先匹配字符串中的元素，然后使用例如html-dom-parser库改造分离字符串进入JSX 元素。

import parse from 'html-react-parser';

export default function App() {
  const tags = str.match(
    /(<h[12]>.*?</h[12]>|<[bp]>.*?</[bp]>|<div>.*?</div>)/g,
  );

  const elements = tags.map((tag) => parse(tag));

  return <div className="App">{elements}</div>;
}

https://codesandbox.io/s/gifted-pond-dm70v8?file=/src/App.js

const str = '<b>First option</b><p>Equals</p><h2>22</h2><div>ble</div>';

const tags = str.match(
  /(<h[12]>.*?</h[12]>|<[bp]>.*?</[bp]>|<div>.*?</div>)/g,
);

console.log(tags);

【讨论】：