如何获取 html 标签内的内容，包括在 javascript 中使用正则表达式的标签？

Question

I have text below -

how  much  production  in  batu

Now this text appears as a series of html tags. Basically each word is wrapped in a span with a specific style or class . Here is how it looks like

'<span style="">how &nbsp;</span><span style="">much &nbsp;</span><span class="pink-highlight">production &nbsp;</span><span style="">in &nbsp;</span><span class="yellow-highlight">batu</span>'

Now I want two things from this html string: style or class and content inside the span (without   )

So I would want an array of following information from the string

[["", "how"], ["", "much"], ["pink-highlight", "production"], ["", "in"], ["yellow-highlight", "batu"]]

Now this can be easily done using regex . But I am not well versed with regex . The pattern that I could think of

<span>(.*?)</span>

But it will only find out the content inside span and it won't even work in this case since each span has a style tag or a class.

So what regex would best apply in this case to get the desired result?

Answer 1

Using a reg exp can fail with matching HTML. It is pretty easy to just parse it as HTML and get the data.

 var html = '<span style="">how &nbsp;</span><span style="">much &nbsp;</span><span class="pink-highlight">production &nbsp;</span><span style="">in &nbsp;</span><span class="yellow-highlight">batu</span>' var temp = document.createElement('div') temp.innerHTML = html var data = Array.from(temp.querySelectorAll('span')).map(span => ([ span.getAttribute("style") || span.getAttribute("class") || '', span.textContent.trim() ]) ) console.log(data)

Answer 2

I will provide a simple regex. Actually I just added 2 more options.

(<span>(.*?)<\/span>)|(<span style=".*?">(.*?)<\/span>)|(<span class=".*?">(.*?)<\/span>)