41

I have a string in unicode that i need to convert. I need to render the string with \u00f3 to ó. This is an example, it should happen with all other types of characters, á, í, ú...

I have the following basic code: https://jsfiddle.net/dddf7o70/

I need to convert

<Hello name="Informaci\u00f3n" />

into

Información
3
  • Why? React and JavaScript can do Unicode just fine, why not just type what you need to type? (the docs recommends \u... notation only as a universally safer option, but by now, Unicode is pretty universally safe) Feb 3, 2016 at 1:09
  • 2
    The reason why i need to convert it is because someone else is feeding me the string: Informaci\u00f3n
    – barracuda
    Feb 3, 2016 at 1:10
  • so this question isn't about React at all, it's "how do I convert strings with \u... notation into plain strings in JavaScript"? Because jsfiddle.net/dddf7o70/3 (with real string content) works fine in React. How are you getting those strings? It seems very unlikely you'd get strings that haven't already resolved the \u.... markers... Feb 3, 2016 at 1:12

4 Answers 4

52

Just pass it as a JS string:

<Hello name={'Informaci\u00f3n'} />

No need to do any manual processing (which is error prone).

Fiddle: https://jsfiddle.net/dddf7o70/5/

2
  • Thanks zerkms, your fiddler works but for some reason react or something in my project is preventing this conversion from occuring. Do you know what could be the cause?
    – barracuda
    Feb 5, 2016 at 0:44
  • @barracuda React cannot "prevent" it - whatever is between the curly braces { } is interpreted as pure JS. I would suggest you to check what jsx was translated into first.
    – zerkms
    Feb 5, 2016 at 4:02
24

If you have to work with strings that have, for whatever reason, literally the letters \u followed by hexadecimals in them instead of being real letters, convert them to numbers, and then use String.fromCharCode() to turn those numbers into real letters. We can use a regexp replace with handler function for this:

// put this in whatever utility library file you have:
export function convertUnicode(input) {
  return input.replace(/\\+u([0-9a-fA-F]{4})/g, (a,b) =>
    String.fromCharCode(parseInt(b, 16)));
}

And then in your component:

import { convertUnicode } from "...your util lib...";

function Hello(props) {
   const name = convertUnicode(props.name);
   return <div>Hello {name}</div>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Hello name="Informaci\\u00f3n"/>);

Fiddle: https://jsfiddle.net/shdye3pq/

4

To put the unicode write in your render() and jsx, you can just:

<div>{'First \u00b7 Second'}</div>

, or

<div>{'First ' + String.fromCharCode(183) + ' Second'}</div>

If doing this with libraries and other fonts, be sure that your font is imported first, make sure that you are using font-family: myFont (i.e. "Font Awesome 5 Free"). And make sure that the unicode that you are using is accurate.

2

Question title leads to this questions around React unicode issues, and sometimes simply this meta tag is needed:

<html>
    <head>
        <meta charset="UTF-8">
    </head>
</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.