Skip to content
Advertisement

How to parse html in react native

So I have html strings in this format: 

Our society reflects, and is a reflection of, the <del>individual</del><add>person</add> (you and I) , and the <del>individual</del><add>person</add> is a <del>reflection</del><add>manifestation</add> of society (hologram/holon ).

And I would like to parse them into nodes like blow:

Our society reflects, and is a reflection of, the 
<del>individual</del>
<add>person</add>
(you and I) , and the 
<del>individual</del>
<add>person</add>
is a 
<del>reflection</del>
<add>manifestation</add>
of society (hologram/holon ).

I know you can do something like:

var element = document.createElement( 'html' );
element.innerHTML = html
nodes = element.childNodes

but in react native I got can't find variable: document and it seems like I will need a web-view to do this. Are there any alternative ways to parse this string?

Advertisement

Answer

If there are no nested nodes nor < >s in the text proper, then a quick and dirty solution would be to match substrings that either start with a tag and end with that tag, or contain no tags:

const str = `Our society reflects, and is a reflection of, the <del>individual</del><add>person</add> (you and I) , and the <del>individual</del><add>person</add> is a <del>reflection</del><add>manifestation</add> of society (hologram/holon ).`;
console.log(str.match(/<(w+)>[^<]+</1>|[^<>]+/g))

If you want to trim the spaces from the beginning and the end of the substrings, then match non-spaces there too:

const str = `Our society reflects, and is a reflection of, the <del>individual</del><add>person</add> (you and I) , and the <del>individual</del><add>person</add> is a <del>reflection</del><add>manifestation</add> of society (hologram/holon ).`;
console.log(str.match(/<(w+)>[^<]+</1>|[^<>s][^<>]+[^<>s]/g))

But finding a true XML parser to use would be the better general option.

Advertisement