Javascript从字符串中提取锚定标记并从中创建新的React组件

const extractAnchorTags = (str) => {
  const regex = /<a\s+href="([^"]+)"\s*>([^<]+)<\/a>/g;
  const anchorTags = [];
  let match;

  while ((match = regex.exec(str)) !== null) {
    const href = match[1];
    const text = match[2];
    anchorTags.push({ href, text });
  }

  return anchorTags;
};

const str = 'This is a sample string with <a href="https://example.com">anchor tag</a>.';
const anchorTags = extractAnchorTags(str);

console.log(anchorTags);

import React from 'react';

const AnchorTag = ({ href, text }) => {
  return (
    <a href={href}>{text}</a>
  );
};

const AnchorTagsList = ({ anchorTags }) => {
  return (
    <ul>
      {anchorTags.map((tag, index) => (
        <li key={index}>
          <AnchorTag href={tag.href} text={tag.text} />
        </li>
      ))}
    </ul>
  );
};

const str = 'This is a sample string with <a href="https://example.com">anchor tag</a>.';
const anchorTags = extractAnchorTags(str);

const App = () => {
  return (
    <div>
      <h1>Anchor Tags</h1>
      <AnchorTagsList anchorTags={anchorTags} />
    </div>
  );
};

export default App;