解码特殊字符

Question

我正在进行api调用，有时会返回字符串中带有特殊字符代码的字符串，并返回诸如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为您解析HTML实体。 dangerouslySetInnerHTML被视为危险的主要原因是，如果您要向最终用户显示用户输入，因为这可以启用XSS攻击。如果您想将用户输入反映给用户，也可以考虑使用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"));