Using a substring function along with jQuery?

Question

I have the following HTML that can appear but only one at a time:

<a id="menuRange" class="button" href="#">1 - 100</a>
<a id="menuRange" class="button" href="#">101 - 200</a>
<a id="menuRange" class="button" href="#">201 - 300</a>

and I used this code to get the range:

var $field = $('#menuRange');
var nums = $field.text().split('-').map(function (a) {
    return parseInt(a, 10) + d * 100
});

Now I want to change the HTML into:

<a id="menuRange" class="button" href="#">Lines 1 - 100</a>
<a id="menuRange" class="button" href="#">Lines 101 - 200</a>
<a id="menuRange" class="button" href="#">Lines 201 - 300</a>

How can I make it so I still get nums data like before. In other words, how can I make it ignore the word "Lines " as though it was not there?

You should consider using unique ID for different elements. — Prasenjit Kumar Nag
– Prasenjit Kumar Nag, Commented Jun 25, 2012 at 11:10
@Joy there is a hidden gotcha that apparently only one of those elements is on the page at a time — Esailija
– Esailija, Commented Jun 25, 2012 at 11:13

Alnitak · Accepted Answer · 2012-06-25 11:10:05Z

5

Just put a .substring() after .text():

var nums = $field.text().substring(6).split('-')...

i.e. just cut out the first 6 characters of the returned text.

Alternatively, if the prefix isn't always there:

var nums = $field.text().replace(/^Lines /, '').split('-')

answered Jun 25, 2012 at 11:10

Alnitak

341k72 gold badges420 silver badges503 bronze badges

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

Comments

nnnnnn · Accepted Answer · 2012-06-25 11:38:31Z

If you want complete freedom in what you put in the anchors' content move the value used by your code for calculations into an attribute. Then you can change your mind about the content the user sees without needing to change your JS code at all:

<a id="menuRange" class="button" href="#" data-lines="1-100">Lines 1 - 100</a>
<a id="menuRange" class="button" href="#" data-lines="101-200">Anything here</a>
<a id="menuRange" class="button" href="#" data-lines="201-300">still works</a>

var $field = $('#menuRange');
var nums = $field.attr("data-lines").split('-').map(function (a) {
    return parseInt(a, 10) + d * 100
});

You could opt for separate attributes for the min and max:

<a id="menuRange" class="button" href="#" data-min="1" data-max="100">Lines 1 - 100</a>

And then you could retrieve them separately rather than splitting out from a single string:

var min = $field.attr("data-min"),  // to get it as a string
    max = $field.attr("data-max");  // use .attr()
// OR
var min = $field.data("min"),       // to have jQuery automatically convert
    max = $field.data("max");       // it to a number use .data()

Collectives™ on Stack Overflow

Using a substring function along with jQuery?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related