如何将Mock Data JSON中的'转为单引号？真实URL调用是否正常？

处理本地Mock数据中的字符实体 #

方法1：通用HTML实体解码 #

如果Mock数据里存在多种HTML实体（不止'），可以借助浏览器的DOMParser做统一解码：

先定义一个工具函数：

function decodeHtmlEntities(text) {
  const parser = new DOMParser();
  const doc = parser.parseFromString(`<div>${text}</div>`, 'text/html');
  return doc.querySelector('div').textContent;
}

然后在useQuery获取数据后，对每个视频的标题进行处理：

export default function Home() {
  const {
    isLoading,
    error,
    data: bts,
  } = useQuery(["bts"], async () => {
    const rawData = await fetch("data/bts.json").then(res => res.json());
    // 遍历处理所有视频的标题
    rawData.items = rawData.items.map(video => ({
      ...video,
      snippet: {
        ...video.snippet,
        title: decodeHtmlEntities(video.snippet.title)
      }
    }));
    return rawData;
  });

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>{error}</p>;

  return (
    <div className={styles.video}>
      {bts.items.map((video) => (
        <VideoCard
          key={video.id.videoId}
          id={video.id.videoId}
          thumbnails={video.snippet.thumbnails.medium}
          title={video.snippet.title}
          channel={video.snippet.channelTitle}
          publish={video.snippet.publishTime}
        />
      ))}
    </div>
  );
}

方法2：针对性正则替换 #

如果只需要处理'（单引号实体），用正则替换更轻量：

function decodeApostrophe(text) {
  return text.replace(/'/g, "'");
}

替换逻辑和上面一致，把decodeHtmlEntities换成这个函数即可。

调用真实URL时的特殊字符显示 #

真实API接口（比如你用到的YouTube Data API）返回的JSON数据通常不会包含HTML实体，会直接使用原始的特殊字符（比如单引号）。因为JSON规范允许字符串内包含单引号（只要整个字符串用双引号包裹），所以调用真实URL时，拿到的数据可以直接正常显示特殊字符，不需要额外处理解码逻辑。

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