Javascript : format string and avoid multiple replace

Question

I have the following string :

var str='
                <span class="productName">Basa fillets</span><br>
                Brand: 
                <span class="brandName">COMPLIMENTS</span><br>
                400 <abbr title="Gram" lang="en">gr</abbr>
            '

I need to get the '400' (could be a word,or even a sentence). What I have so far is :

d = str.replace(/<br>/g,'').replace(/<.*<\/.*>/g,'').replace(/\n/g,'').replace(/ */g,'').replace(/brand:/i,'');

It works but... well, I'm sure I can do better. i have plenty of similar queued replace in my code, and I'd like to know how to improve that so i'm more looking for a general answer than a particular solution.

Thanks!

Your string isn't valid you either need to escape the " symbol with \" or use ' inside the main string. changing it to var str="Basa fillets Brand: COMPLIMENTS 400 <abbr title='Gram' lang='en'>gr</abbr>"; — abc123
– abc123, Commented Oct 29, 2013 at 15:11
or change the "" around it with '. Edited, was obviously a typo... — xShirase
– xShirase, Commented Oct 29, 2013 at 15:16

gen_Eric · Accepted Answer · 2013-10-29 15:23:05Z

5

Instead of using string tools/regex on this, you can use DOM methods on it (it is HTML).

First you make a "fake" div and add the HTML to it.

var str="\
                <span class=\"productName\">Basa fillets</span><br>\
                Brand: \
                <span class=\"brandName\">COMPLIMENTS</span><br>\
                400 <abbr title=\"Gram\" lang=\"en\">gr</abbr>\
            ";

var fakeDiv = document.createElement('div');
fakeDiv.innerHTML = str;

Then just use normal DOM traversal methods to get the node you need. There are many ways to get to the element, depending on your HTML.

var brandName = fakeDiv.getElementsByClassName('brandName');

var textNode = brandName[0].nextSibling.nextSibling;

console.log(textNode.nodeValue.trim());

DEMO: http://jsfiddle.net/aqpgV/

Or, you can start from the <abbr> element and work backwards.

var gram = fakeDiv.getElementsByTagName('abbr');

var textNode = gram[0].previousSibling;

console.log(textNode.nodeValue.trim());

DEMO: http://jsfiddle.net/aqpgV/1/

However you traverse it is up to you :-)

edited Oct 29, 2013 at 15:23

answered Oct 29, 2013 at 15:12

gen_Eric

228k42 gold badges304 silver badges343 bronze badges

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

4 Comments

xShirase Over a year ago

Great answer, I wouldn't have thought of the fakeDiv! thanks a lot!

gen_Eric Over a year ago

Glad I could help! :-D Yeah, you don't actually need elements to actually be in the DOM to be able to use them ;-)

Tom Pietrosanti Over a year ago

If you need to support IE8, you won't have getElementsByClassName, but you could use fakeDiv.querySelector('.brandName'); since there is only one element with class "brandName".

gen_Eric Over a year ago

@TomPietrosanti: Thanks. I forgot getElementsByClassName doesn't work in old browsers.

abc123 · Accepted Answer · 2013-10-29 15:18:33Z

0

Regex

class="brandName">[^<]+</span><br>[^\w]+([^<]+) <abbr title=

Regular expression visualization

Debuggex Demo

Notes: Group 1 will contain the item you want.

answered Oct 29, 2013 at 15:18

abc123

19k7 gold badges55 silver badges84 bronze badges

2 Comments

xShirase Over a year ago

sexy! but my teammates will pull their hair with that one :-D thanks!

abc123 Over a year ago

@xShirase completely understandable, I honestly think using html's native concepts and manipulation for getting items is more appropriate for this. Just wanted to give you a quick example of some RegEx.

WeldFire · Accepted Answer · 2013-10-29 15:29:01Z

0

If you wanted to use regex, you could do something like this.

    var str="\
            <span class=\"productName\">Basa fillets</span><br>\
            Brand: \
            <span class=\"brandName\">COMPLIMENTS</span><br>\
            400 <abbr title=\"Gram\" lang=\"en\">gr</abbr>\
        ";

    var myRegexp = /COMPLIMENTS<\/span><br>\W(.*?) <abbr /g;
    var match = myRegexp.exec(str);
    alert(match[1]);

answered Oct 29, 2013 at 15:29

WeldFire

3041 gold badge4 silver badges8 bronze badges

Collectives™ on Stack Overflow

Javascript : format string and avoid multiple replace

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related