如何移除Fetch请求返回数据中的特殊转义符号？

这些"、'都是HTML实体转义字符，直接用浏览器原生的DOM解析能力就能解码，不用额外装库。

步骤1：写一个解码函数 #

这个函数利用临时DOM元素的innerHTML解析能力，自动把转义字符转成正常文本：

function decodeHtmlEntities(str) {
  const tempDiv = document.createElement('div');
  tempDiv.innerHTML = str;
  return tempDiv.textContent;
}

步骤2：修改你的数据处理逻辑 #

在映射数据的时候，对题目、正确答案、错误答案都调用这个解码函数，替换掉原来的转义内容：

useEffect(() => {
    fetch(
      "https://opentdb.com/api.php?amount=5&category=10&difficulty=easy&type=multiple"
    )
      .then((res) => res.json())
      .then((data) =>
        setMyData(
          data.results.map((question) => {
            // 解码所有带转义的字段
            const decodedQuestion = decodeHtmlEntities(question.question);
            const decodedCorrect = decodeHtmlEntities(question.correct_answer);
            const decodedIncorrect = question.incorrect_answers.map(ans => decodeHtmlEntities(ans));
            
            return {
              ...question,
              question: decodedQuestion,
              correct_answer: decodedCorrect,
              incorrect_answers: [
                ...decodedIncorrect,
                decodedCorrect
              ].map((answer) => ({
                answer,
                isSelected: false,
                id: nanoid()
              }))
            };
          })
        )
      );
  }, []);

备选方案：手动替换（不推荐） #

如果不想用DOM元素，也可以手动替换常见的转义字符，但这种方法只能覆盖已知的实体，遇到少见的转义会失效：

function decodeHtmlEntities(str) {
  return str
    .replace(/&/g, '&')
    .replace(/"/g, '"')
    .replace(/'/g, "'")
    .replace(/&lt;/g, '<')
    .replace(/&gt;/g, '>');
}

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