ReactJS中如何仅渲染HTML字符串里的<h1>标签内容

Solution to Extract Only

Content from HTML String in React #

content from your HTML string. Here are two reliable approaches:

tag or nested elements inside it. The browser's built-in DOMParser can parse the HTML string into a document, allowing you to query for the

element and extract its text.

Here's how to implement it in your React component:

import React from 'react';

function EventComponent() {
  const textHtml = "<h1>What events are you looking for today?</h1> <p>Find more events you want!</p>";

  // Function to extract h1 content
  const getH1Text = (html) => {
    const parser = new DOMParser();
    const doc = parser.parseFromString(html, 'text/html');
    const h1Element = doc.querySelector('h1');
    // Return the text content if h1 exists, else empty string
    return h1Element ? h1Element.textContent.trim() : '';
  };

  const h1Content = getH1Text(textHtml);

  return (
    <div>
      {/* Render just the extracted text */}
      <h1>{h1Content}</h1>
    </div>
  );
}

export default EventComponent;

tag with no attributes or nested elements, you can use a regex to extract the content. However, note that regex isn't designed for parsing HTML and can break if the HTML structure changes (like adding classes to the

).

Example code:

import React from 'react';

function EventComponent() {
  const textHtml = "<h1>What events are you looking for today?</h1> <p>Find more events you want!</p>";
  
  // Regex to match content inside <h1> tags (case-insensitive)
  const h1Match = textHtml.match(/<h1>(.*?)<\/h1>/i);
  const h1Content = h1Match ? h1Match[1].trim() : '';

  return (
    <div>
      <h1>{h1Content}</h1>
    </div>
  );
}

export default EventComponent;