Decoding Special Character

Question

I am making an api call which sometimes returns strings with special character codes in the string, something like adiós is being returned, and I need to display to my user as adiós instead. I have tried several combinations of escape / unescape encodeURI / decodeURI on their own and together, but no matter what I do I can't seem to get this to work! My teammates were able to get them to display using dangerouslySetInnerHTML , but I know there has to be a better way? What might I be missing on this? The only other thing I can think would be to write a regex for it, but the problem is I don't know all of the characters that I might get back from the api to know what to write in the regex. Any help would be appreciated, I have read a few posts, one of which was this one, and another that suggested setting utf-8 encoding in the index.html file, but the problem is that is already set. We are using react for our project if it makes any difference!

This is the code where I am setting the text

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

Where currentQuestion is from the api request. The api is https://opentdb.com/api

Answer 1

You could consider using a 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 or another sanitizing library if you're wanting to reflect user input back to the user.

Here is an example using a DOMParser to parse the HTML string:

 const parseEntities = txt => new DOMParser().parseFromString(txt, 'text/html').body.innerText; const App = () => { const txt = 'adi&oacute;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

Maybe this helps

 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"));