javascript html regex

Question

i'm trying to learn regex parse in javascript.

I need to read the text in a "span"

<span class="item_color_title">Status:</span>
<span class="item_color_success">
Alive
</span>

"Alive" is what i need. Any easy way out?

This is for a firefox extension, where i've:

var req = new XMLHttpRequest(); 
req.open('GET', 'http://www.example.com/', false); 
req.send(null); 
if(req.status == 200) 
 standard_status.label = req.responseText;

And, standard_status should say "Alive"

Thanks!!

• dotoree: You should not use regex to parse html :)

Answer 1

Parse the response into an HTML fragment:

> html = $('<div/>').html(req.responseText)
> $('.item_color_success', html).text()
"Alive"

• Ruan Mendes: This is what the OP is looking for, sweaver2112 had the right idea, but didn't realize that responseText is the HTML and that it hasn't been attached to the DOM

Answer 2

Regex? jQuery makes it trivial:

alert($('span.item_color_success').html());

• Esselans: standard_status.label = ?? .. Sorry, i do not understand how to use your code. i'm terribly new to javascript.
• sdepold: standard_status.label = $('div.item_color_success').html(). but you should maybe use .text() instead of .html()
• Esselans: Oks, but where is "req" use? Js knows that $ is req ?... Edit: standard_status.label = req.responseText; works ok, but the whole html is shown.
• sdepold: hmm, ic. good question :D $ is not req, but the jquery method. $('div.item_color_success') will access the dom element (the second span). but this will only work if you append the received data to the dom.

Answer 3

Well, if you really want to use a regexp you could use this:

var text = req.responseText.replace('\n', '')
 , status = text.match(/<span class="item_color_success">(.*)<\/span>/)[1]
standard_status.label = status

You need to replace the linebreaks as js is not correctly matching linebreaks with .* in combination with /.*/m.

Hope that helps.

• Esselans: if jquery is faster and "cleaner" i'll use that. Thanks for your answer, i'll keep it.
• sdepold: well it's definitely not faster but much cleaner. and if you are already using jquery already (i have no clue about firefox extensions), it is ok to use it.

Answer 4

If you don't wat to add an extra Jquery dependency, this can be done with pure Javascript.

var req = new XMLHttpRequest(); 
req.onload = function() { 
 alert(this.responseXML.title);
 if(req.status == 200){
 standard_status.label = req.responseXml.getElementsByClassName('item_color_success')[0].textContent;
 }
} 
req.open("GET", 'http://www.example.com/'); //must use async request for HTML
req.responseType = "document"; 
req.send();

I didn't test this but it should not be too far off.