Strange characters in unicode format, struggling to convert to integer, resulting in NaN

Question

Strange characters in unicode format, struggling to convert to integer, resulting in NaN

Looking to solve a similar issue discussed on this Stack Overflow thread, which explores how to print an array of HTML entities as unicode.

My specific problem involves working with an array of custom font HTML entities:

const arr = ['crop_&#x31;&#x36;_&#x39;', 'computer', '&#x33;d_rotation', '&#xf100;'];

I've managed to successfully display  using the following code snippet:

render() {
    return <span> String.fromCodePoint(parseInt(arr[0].replace(/&#x|;/g,''),16)) </span>
}

However, I encounter errors when trying to apply this method to the other elements in the array:

The error messages state that "parseInt is NaN" and "SOME_NUMBER_HERE is out of range for String.fromCodePoint."

Is there a solution to correctly convert all the HTML entities to Unicode using String.fromCodePoint and parseInt?

javascript unicode

Answer 1

Answer №1

Using HTML entities in JS string literals may not be the best practice, as JS has direct support for unicode characters. However, if you still need to do it, here is a more effective way.

Your current method works for single entity strings only by using replace function to extract character codes from each entity. This approach fails when dealing with strings that have both normal characters and multiple entities. In such cases, you should replace each entity with its unicode character directly within the string:

arr[0].replace(/&#x([0-9a-f]+);/gi, (_, code) => String.fromCodePoint(parseInt(code, 16)))

Answer 2

Using HTML entities in JS string literals may not be the best practice, as JS has direct support for unicode characters. However, if you still need to do it, here is a more effective way.

Your current method works for single entity strings only by using replace function to extract character codes from each entity. This approach fails when dealing with strings that have both normal characters and multiple entities. In such cases, you should replace each entity with its unicode character directly within the string:

arr[0].replace(/&#x([0-9a-f]+);/gi, (_, code) => String.fromCodePoint(parseInt(code, 16)))

Strange characters in unicode format, struggling to convert to integer, resulting in NaN

Answer №1

Similar questions

After the update, Material UI is causing a TypeError by throwing an error stating that it cannot read the property 'muiName' of an

Making modifications to the CSS within an embedded iframe webpage

Retrieve the present time of an ongoing CSS3 animation

`the issue of $scope object not being passed correctly to ng-if and ng-class ternary conditions

Troubleshooting a JavaScript error: Script.js throwing 'Uncaught TypeError' at line 5

Dealing with error handling in NUXT using asyncData and Vue actions

What could be causing the issue of messages not displaying while incorporating connect-flash with res.locals in express.js and ejs templating?

finding the ID of the element that triggered a jQuery dialog

Rotating Character in Three.js

Execute the function on the React template rendering process

I'm having trouble with installing nx as it keeps showing the error message 'Platform Dependency for NX is Missing.'

Vue alert: A duplicate key with the value of '10' has been identified. This could potentially lead to an issue with updates

Why do `setTimeout` calls within JavaScript `for` loops often result in failure?

The React application functions smoothly when executed using react-scripts start, but encounters an "Unexpected SyntaxError: Unexpected Token: <" error upon building

Tree Grid in jqGrid with Offline Data

How to share information between ES6 classes?

Pass an item along with its superclass using express

Passing data between multiple components in Vue.js and Laravel: Best practices

Guide on how to retrieve server error responses in javascript using axios

The onClick functionality for the IconComponent (dropdown-arrow) in React Material UI is not functioning properly when selecting