正则表达式/JS – 从特定 xml 标记中删除内容并仅保留文本

Question

I'd like to remove content from specific tags and keep only the text. I'm using Javascript but on React Native, so I can't use Dom or JQuery.

For example, for this input, I'd like to remove all the sub-tags of "li":

<div>
     <div><span>hello</span></div>  
     <ul>
         <li><div><span>hello 2</span></div></li>
         <li><div><span>hello 3</span></div></li>
     </ul>       
</div>

I'd like to get this output:

<div>
     <div><span>hello</span></div>  
     <ul>
         <li>hello 2</li>
         <li>hello 3</li>
     </ul>       
</div>

How can I achieve this? (again, not using DOM or JQuery)

Thank you!

Answer 1

Here is a native JavaScript way to filter out specific tags within <li> tags:

 var str = '<div>\n' + ' <div><span>hello</span></div>\n' + ' <ul>\n' + ' <li><div><span>hello 2</span></div></li>\n' + ' <li><div><span>hello 3</span></div></li>\n' + ' </ul>\n' + '</div>'; var re1 = /(<li> *)(.*?)(<\/li>)/g; var re2 = /<\/?(div|span)\b[^>]*> */g; var result = str.replace(re1, function(m, p1, p2, p3) { return p1 + p2.replace(re2, '') + p3; }); console.log('result:\n' + result);

Console output:

result:
<div>
     <div><span>hello</span></div>
     <ul>
         <li>hello 2</li>
         <li>hello 3</li>
     </ul>
</div>

Explanation:

• re1 identifies <li> tags
  • it has the g flag to match multiple times
  • the replace function has three capture groups as parameters p1 , p2 , p3
• the replace function removes all div and span tags from p2 , which is the content within the <li> tag
  • tweak the re2 to add additional tags to filter
  • it also has the g flag to match multiple times