解码特殊字符

Question

我正在进行 api 调用，有时会 returns 字符串中包含特殊字符代码，返回类似 adiós 的内容，我需要向用户显示作为 adiós 代替。我已经单独和一起尝试了 escape/unescape encodeURI/decodeURI 的几种组合，但无论我做什么，我似乎都无法让它发挥作用！我的队友可以使用 dangerouslySetInnerHTML 让它们显示，但我知道必须有更好的方法吗？我可能会错过什么？我唯一能想到的就是为它写一个正则表达式，但问题是我不知道我可能从 api 返回的所有字符，不知道在正则表达式中写什么。任何帮助，将不胜感激！ 我看过一些帖子，其中一篇是 this 一篇，另一篇建议在 index.html 文件中设置 utf-8 编码，但问题是已经设置了。如果有任何不同，我们正在为我们的项目使用 React！

这是我设置文本的代码

setHelperText(
  // todo: fix this to display dangerously set inner HTML so it handles regex
  `Sorry, wrong answer! The correct answer was: ${currentQuestion.correctAnswer}`
);

其中 currentQuestion 来自 api 请求。 api 是 https://opentdb.com/api

Answer 1

如果您想要将用户输入反馈给用户，您可以考虑使用 DOMParser to parse the HTML entities for you. The main reason why dangerouslySetInnerHTML is considered dangerous is if you're displaying user input back to the end-user as this can enable XSS attacks. You can also consider using DOMPurify 或其他清理库。

下面是一个使用 DOMParser 解析 HTML 字符串的示例：

const parseEntities = txt => new DOMParser().parseFromString(txt, 'text/html').body.innerText;

const App = () => {
  const txt = 'adiós';
  return <p>{parseEntities(txt)}</p>;
};

ReactDOM.render(<App />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 2

也许这有帮助

function htmlEntities(str) {
      return String(str).replace('ñ', 'ñ')
                        .replace('Ñ', 'Ñ')
                        .replace('&', '&')
                        .replace('Ñ', 'Ñ')
                        .replace('ñ', 'ñ')
                        .replace('Ñ', 'Ñ')
                        .replace('À', 'À')
                        .replace('Á', 'Á')  
                        .replace('Â','Â')
                        .replace('Ã','Ã')   
                        .replace('Ä','Ä')
                        .replace('Å','Å')
                        .replace('Æ','Æ')
                        .replace('Ç','Ç')
                        .replace('È','È')
                        .replace('É','É')
                        .replace('Ê', 'Ê')
                        .replace('Ë','Ë')
                        .replace(   'Ì', 'Ì')
                        .replace('Í', 'Í'    )
                        .replace('Î', 'Î' )
                        .replace(   'Ï', 'Ï')
                        .replace(   'Ð', 'Ð')
                        .replace(   'Ñ', 'Ñ')
                        .replace(   'Ò', 'Ò')
                        .replace(   'Ó', 'Ó')
                        .replace('Ô', 'Ô' )
                        .replace(   'Õ', 'Õ')
                        .replace('Ö', 'Ö'  )
                        .replace('Ø', 'Ø'    )
                        .replace(   'Ù' ,'Ù')
                        .replace(   'Ú', 'Ú')
                        .replace(   'Û', 'Û')
                        .replace(   'Ü', 'Ü')
                        .replace(   'Ý', 'Ý')
                        .replace('Þ', 'Þ' )
                        .replace(   'ß', 'ß')
                        .replace(   'à', 'à')
                        .replace(   'á', 'á')
                        .replace(   'â', 'â')
                        .replace(   'ã', 'ã')
                        .replace('ä', 'ä'  )
                        .replace(   'å', 'å')
                        .replace(   'æ', 'æ')
                        .replace(   'ç', 'ç')
                        .replace('è', 'è'    )
                        .replace('é', 'é'    )
                        .replace('ê', 'ê' )
                        .replace('ë', 'ë'  )
                        .replace(   'ì', 'ì')
                        .replace('í', 'í'    )
                        .replace('î', 'î' )
                        .replace('ï', 'ï'  )
                        .replace('ð', 'ð'   )
                        .replace(   'ñ', 'ñ')
                        .replace('ò','ò')
                        .replace('ó','ó')
                        .replace('ô','ô')
                        .replace('õ','õ')
                        .replace('ö','ö')
                        .replace('ø','ø')
                        .replace('ù','ù')
                        .replace('ú','ú')
                        .replace('û','û')
                        .replace('ü' , 'ü')   
                        .replace('ý', 'ý')  
                        .replace('þ', 'þ')
                        .replace('ÿ', 'ÿ');
}

console.log(htmlEntities("adiós"));