How to convert string to normal text in JS (reactjs)

Question

I was calling in data from an api and data has special characters. For eg in object returned :

{
  question : "In which year did the British television series &quot;The Bill&quot; end?"
}

If I store this value in a variable it saves as a string and when I call this variable using JSX, itthinks its a string and doesn't recognize special characters.

How can I solve this?

export default function Quiz(props){
const element = "In which year did the British television series &quot;The Bill&quot; end?"
        
    return (
         <main>
             {element}
          </main>
            )
  }

I want to render this on the screen

In which year did the British television series "The Bill" end?

Can you please post your code as text, not as an image? People can't copy-paste it into their answer when it's an image. — Nick Parsons
– Nick Parsons, Commented Dec 21, 2022 at 11:05
This is React @AbhishekPandey. There is dangerouslySetInnerHTML but that's probably to be avoided. — Andy
– Andy, Commented Dec 21, 2022 at 11:08

Nick Parsons · Accepted Answer · 2022-12-21 11:47:30Z

1

You can use a DOMParser to convert your HTML entities into characters by grabbing the innerText of the parsed body element. As we're only dealing with and rendering text content, and not HTML content, we don't need to worry about dangerously setting our HTML (with something like dangerouslySetInnerHTML) that could potentially lead to attacks such as XSS:

const {useMemo} = React;

const App = () => {
  const element = useMemo(() => {
    const str = "In which year did the British television series &quot;The Bill&quot; end?";
    return new DOMParser().parseFromString(str, "text/html").body.innerText;
  }, []);
  return <p>{element}</p>;
};

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

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

edited Dec 21, 2022 at 11:47

answered Dec 21, 2022 at 11:22

Nick Parsons

51.7k6 gold badges61 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kimo02 · Accepted Answer · 2022-12-21 11:14:44Z

0

You can use the javascript string method replaceAll().

You can use it as string.replaceAll(""","\"")

string = "In which year did the British television series &quot;The Bill&quot; end?";
console.log(string.replaceAll("&quot;","\""));

Run the snippet and you will get the answer you want.

answered Dec 21, 2022 at 11:14

kimo02

235 bronze badges

Comments

Andy · Accepted Answer · 2022-12-21 11:15:46Z

0

You could create and call a small "sanitise" function that takes a dictionary of key/value pairs, and runs replaceAll on each to swap out the HTML entities.

const data ={
  question: 'In which &lt;year&gt; did the British television series &quot;The Bill&quot; end?'
}

const dict = {
  '&quot;': '"',
  '&gt;': '>',
  '&lt;': '<'
};

function sanitise(str) {
  for (const key in dict) {
    str = str.replaceAll(key, dict[key]);
  }
  return str;
}

console.log(sanitise(data.question));

answered Dec 21, 2022 at 11:15

Andy

63.6k13 gold badges72 silver badges99 bronze badges

1 Comment

Parmeet Singh Over a year ago

I am calling data from some quiz api that has random question and those question contains all sorts of special characters, greek letters, currency symbols. I just want to be able to show them. there must be some other way too right

Muhammad Jamshaid · Accepted Answer · 2022-12-21 12:40:01Z

0

Here is very simple and easy to use solution without any headache

simply install a react package called react-render-markup and then import in your component where you want to convert this string to plan text it's actually a HTML markup 😉 like that:

import { Markup } from 'react-render-markup';

export default function Quiz(props){ 

const element = "In which year did the British television series &quot;The Bill&quot; end?"   

return (
     <main>
         <Markup markup={element} />
     </main>
  )
}

And see the magic

answered Dec 21, 2022 at 12:40

Muhammad Jamshaid

213 bronze badges

Collectives™ on Stack Overflow

How to convert string to normal text in JS (reactjs)

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related