regular expression to build span tags using multiple patterns

Question

Apart from what they are, I dont know anything about regular expressions... :(

I have this code in a javascript function:

var foroFormatting = function (text) {
    var newText = text;
    var findreps = [
        { find: /^([^\-]+) \- /g, rep: '<span class="ui-selectmenu-item-header">$1</span>' },
        { find: /([^\|><]+) \| /g, rep: '<span class="ui-selectmenu-item-content">$1</span>' },
        { find: /([^\|><\(\)]+) (\()/g, rep: '<span class="ui-selectmenu-item-content">$1</span>$2' },
        { find: /([^\|><\(\)]+)$/g, rep: '<span class="ui-selectmenu-item-content">$1</span>' },
        { find: /(\([^\|><]+\))$/g, rep: '<span class="ui-selectmenu-item-footer">$1</span>' }
    ];
    for (var i in findreps) {
        newText = newText.replace(findreps[i].find, findreps[i].rep);
    }
    return newText;
}

This code expect a string like this

John Doe - 78 West Main St Apt 3A | Bloomsburg, PA 12345 (footer text)

and split it in four span elements right?

I would like to apply the same formatting to a string that is a bit different from that

John Doe - 78 West Main St Apt 3A | Bloomsburg, PA 12345

How do I have to modify the regular expression?

EDIT

I am trying to use this plugin (third example) with a string of mine that is different from the original just in the last part

what is your desired result? you want to have empty <span class="ui-selectmenu-item-footer" /> ? — mykhal
– mykhal, Commented Oct 18, 2010 at 1:39

Jason McCreary · Accepted Answer · 2010-10-18 01:42:16Z

1

If all you are dropping is just (footer text), then the same function without the last replacement regex will work.

var foroFormatting2 = function (text) {
    var newText = text;
    var findreps = [
        { find: /^([^\-]+) \- /g, rep: '<span class="ui-selectmenu-item-header">$1</span>' },
        { find: /([^\|><]+) \| /g, rep: '<span class="ui-selectmenu-item-content">$1</span>' },
        { find: /([^\|><\(\)]+)$/g, rep: '<span class="ui-selectmenu-item-content">$1</span>' }
    ];
    for (var i in findreps) {
        newText = newText.replace(findreps[i].find, findreps[i].rep);
    }
    return newText;
}

I've removed the parts that captured and formatted (footer text). I suggest reading up on regular expressions. They are a great tool.

answered Oct 18, 2010 at 1:42

Jason McCreary

73.3k23 gold badges140 silver badges177 bronze badges

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

1 Comment

Jason McCreary Over a year ago

No problem. Keep in mind the answer by mykhal. After looking at the original function, this may indeed be true. However, the resulting <span> set may not be what you what - i.e. class of footer still appears.

mykhal · Accepted Answer · 2010-10-18 01:51:25Z

1

you don't have to change anything, the code works perfectly without the footer text in parenthesis

answered Oct 18, 2010 at 1:51

mykhal

20.1k11 gold badges84 silver badges84 bronze badges

Comments

Drew · Accepted Answer · 2010-10-18 02:04:18Z

1

Well, let me give you some tips to make this super easy. Change your input format to this.

This is an array of strings in JSON format.

var arr = ['John Doe', '78 West Main St Apt 3A', 'Bloomsburg, PA 12345', '(footer text)'];
var outputStr = '<span class="ui-selectmenu-item-header">' + 
       //This line concats the array elements with this text inserted
       // between each element
       arr.join('</span><span class="ui-selectmenu-item-header">') + 
'</span>';

answered Oct 18, 2010 at 2:04

Drew

4,7114 gold badges38 silver badges50 bronze badges

Comments

Drew · Accepted Answer · 2010-10-18 01:38:48Z

0

Have you considered modifying the input format, maybe JSON? That looks like a very flimsy parsing format.

What exactly is the expected output? Use the required spans

answered Oct 18, 2010 at 1:38

Drew

4,7114 gold badges38 silver badges50 bronze badges

Collectives™ on Stack Overflow

regular expression to build span tags using multiple patterns

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related