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!!

You should not use regex to parse html :)

dotoree
– dotoree

2012-03-06 19:00:06 +00:00
Commented Mar 6, 2012 at 19:00 — dotoree
– dotoree, Commented Mar 6, 2012 at 19:00

Josh Lee · Accepted Answer · 2012-03-06 19:20:57Z

2

Parse the response into an HTML fragment:

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

answered Mar 6, 2012 at 19:20

Josh Lee

179k39 gold badges278 silver badges282 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ruan Mendes Over a year ago

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

Ry- · Accepted Answer · 2012-03-06 19:26:37Z

2

Regex? jQuery makes it trivial:

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

edited Mar 6, 2012 at 19:26

Ry-♦

226k56 gold badges496 silver badges504 bronze badges

answered Mar 6, 2012 at 19:03

Scott Weaver

7,3832 gold badges33 silver badges45 bronze badges

4 Comments

Esselans Over a year ago

standard_status.label = ?? .. Sorry, i do not understand how to use your code. i'm terribly new to javascript.

sdepold Over a year ago

standard_status.label = $('div.item_color_success').html(). but you should maybe use .text() instead of .html()

Esselans Over a year ago

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 Over a year ago

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.

sdepold · Accepted Answer · 2012-03-06 19:15:35Z

1

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.

edited Mar 6, 2012 at 19:15

answered Mar 6, 2012 at 19:07

sdepold

6,2262 gold badges43 silver badges47 bronze badges

2 Comments

Esselans Over a year ago

if jquery is faster and "cleaner" i'll use that. Thanks for your answer, i'll keep it.

sdepold Over a year ago

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.

hugomg · Accepted Answer · 2012-03-06 19:25:23Z

0

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.

answered Mar 6, 2012 at 19:25

hugomg

70.4k30 gold badges168 silver badges257 bronze badges

Collectives™ on Stack Overflow

javascript html regex

4 Answers 4

1 Comment

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related