将JSX元素转为字符串时，如何获取双引号而非"？

renderToStaticMarkup会自动转义HTML特殊字符，导致双引号变为"（嵌套场景下会显示为"），以下两种方法可获取原始双引号：

• 方法一：HTML实体解码
  借助浏览器的DOMParser API解析渲染后的HTML字符串，提取文本内容时自动解码所有HTML实体：

  import { renderToStaticMarkup } from "react-dom/server";
  
  export default function App() {
    var a = (
      <>
        {`Code "Sand" box.`} <br /> {`CodeSandbox`}
      </>
    );
    var b = renderToStaticMarkup(a);
    // 解码HTML实体
    const parser = new DOMParser();
    const doc = parser.parseFromString(b, 'text/html');
    const decodedB = doc.body.textContent;
    var c = (decodedB.charAt(0).toUpperCase() + decodedB.slice(1)).slice(0, 20) + "...";
  
    return (
      <div className="App">
        <h1>{c}</h1>
      </div>
    );
  }
  

• 方法二：直接替换转义实体
  若仅需处理双引号，可直接用字符串替换将"替换为原始双引号：

  import { renderToStaticMarkup } from "react-dom/server";
  
  export default function App() {
    var a = (
      <>
        {`Code "Sand" box.`} <br /> {`CodeSandbox`}
      </>
    );
    var b = renderToStaticMarkup(a).replace(/&quot;/g, '"');
    var c = (b.charAt(0).toUpperCase() + b.slice(1)).slice(0, 20) + "...";
  
    return (
      <div className="App">
        <h1>{c}</h1>
      </div>
    );
  }
  

注意：原代码中模板字符串内的"无需手动编写，直接使用双引号"Sand"即可，renderToStaticMarkup会自动转义为HTML实体，后续通过上述方法还原即可。

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