如何使用JavaScript解析HTML字符串？以及如何在React组件中渲染HTML格式的响应数据？

Hey there! Let's tackle your two questions about HTML parsing and React rendering step by step.

问题一：如何使用JavaScript解析HTML字符串？ #

There are a couple of reliable approaches to parse HTML strings in JavaScript, depending on what you need to do with the parsed content:

• Use the DOMParser API (modern, standard method): This lets you convert an HTML string into a full DOM document, making it easy to query and extract elements.

  const htmlString = '<div class="content"><p>Hello, parsed HTML!</p></div>';
  const parser = new DOMParser();
  const doc = parser.parseFromString(htmlString, 'text/html');
  
  // Grab a specific element from the parsed document
  const paragraph = doc.querySelector('p');
  console.log(paragraph.textContent); // Output: "Hello, parsed HTML!"
  

• Create a temporary DOM element and set innerHTML: If you just need to turn the HTML string into DOM nodes to insert into the page, this method is straightforward.

  const htmlString = '<b>Important note</b><br>Remember to sanitize untrusted content!';
  const tempContainer = document.createElement('div');
  tempContainer.innerHTML = htmlString;
  
  // Append the parsed content to the page
  document.body.appendChild(tempContainer);
  

问题二：在React组件中渲染转义的HTML字符串 #

Your response data is escaped HTML (with entities like < instead of <), so we need two key steps to render it correctly in React: first decode the escaped entities back to actual HTML tags, then use React's dangerouslySetInnerHTML to render the raw HTML (since React auto-escapes text by default to prevent XSS risks).

Step 1: Decode the escaped HTML #

First, let's convert those entity characters back to real HTML. You can use a simple helper function that leverages a DOM element's innerHTML to handle decoding automatically:

function decodeEscapedHtml(escapedHtml) {
  const tempDiv = document.createElement('div');
  tempDiv.innerHTML = escapedHtml;
  return tempDiv.innerHTML;
}

Step 2: Render in React component #

Now, in your React component, use dangerouslySetInnerHTML to inject the decoded HTML into your div:

import React from 'react';

function FaqComponent() {
  // Your escaped HTML response
  const escapedResponse = '<b>How can I waive the underage fee?</b><br> You … have marked your age correctly before searching.';
  
  // Decode the escaped HTML to get actual tags
  const decodedHtml = decodeEscapedHtml(escapedResponse);

  return (
    <div className="faq-container">
      {/* First div with your custom content */}
      <div className="section-header">FAQ Answer:</div>
      {/* Div that renders the HTML content */}
      <div dangerouslySetInnerHTML={{ __html: decodedHtml }} />
      {/* Second div with your custom content */}
      <div className="section-footer">Need more help? Contact support.</div>
    </div>
  );
}

export default FaqComponent;

⚠️ A quick important note: dangerouslySetInnerHTML has that name for a reason—if the HTML content comes from an untrusted source (like user input), it can expose your app to XSS attacks. Always sanitize untrusted HTML before rendering it! You can use libraries like DOMPurify to clean up the content if needed.

内容的提问来源于stack exchange，提问作者Ozan Cinci