CODEWITHSUNDEEP
javascriptreactjsreact-native
bikedres
bikedres

Reputation: 135

Parsing Tags from a String and returning as JSX

So my backend returns a string with 2 sets of strong tags. Looks like:

const string = "<strong>Name N.</strong> How are you doing today? <strong>more text</strong>"

Since I'm using react native, I can't display it as is. I would like to return something that looks like:

<Text>
  <Text style={{fontWeight: 'bold'}>Name N.</Text>

  How are you doing today?

  <Text style={{fontWeight: 'bold'}>more text</Text>

<Text>

What is the best way to go about this?

Thanks :)

Upvotes: 1

Views: 112

Answers (1)

Nisharg Shah
Nisharg Shah

Reputation: 19542

You can do that with two way

1st option

By webview

const string = "<strong>Name N.</strong> How are you doing today? <strong>more text</strong>"

<WebView source={{html: string}} />

2nd option

By replace and split

const text = "<strong>Name N.</strong> How are you doing today? <strong>more text</strong>";
const [first, second, third] = text.replace(/(<\/strong>|<strong>)/g, '|').split('|').filter(cur => cur).map(cur => cur.trim());
console.log(first);
console.log(second);
console.log(third);

Upvotes: 1

Related Questions