Question

I have the following string (field_data):

<fieldset>
    <div class='control-group'>
        <h5>New Side Dish</h5>
        <input id="menu_dishes_attributes_1344897592128_side_dishes_attributes_70308623619760_name" name="menu[dishes_attributes][1344897592128][side_dishes_attributes][70308623619760][name]" placeholder="Name" size="30" type="text" />
        <input id="menu_dishes_attributes_1344897592128_side_dishes_attributes_70308623619760__destroy" name="menu[dishes_attributes][1344897592128][side_dishes_attributes][70308623619760][_destroy]" type="hidden" value="false" />
        <input id="menu_dishes_attributes_1344897592128_side_dishes_attributes_70308623619760_price" name="menu[dishes_attributes][1344897592128][side_dishes_attributes][70308623619760][price]" placeholder="Price" size="30" type="text" />
        <input id="menu_dishes_attributes_1344897592128_side_dishes_attributes_70308623619760_restaurant_id" name="menu[dishes_attributes][1344897592128][side_dishes_attributes][70308623619760][restaurant_id]" type="hidden" />
        <a href="#" class="remove_fields">X</a>
    </div>
</fieldset>

And I want to grab the number between [side_dishes_attributes] and [restaurant_id] which is 70308623619760 and only the first occurrence or last occurrence but I basicly just need one instance of it.

I know you can use regular expression and filter but whenever I use any of these, it either returns all the digits in the string or it displays all the sets of the number in an incorrect output.

The number I’m grabbing is not static so it changes every iteration of the code but the names side_dishes_attributes and restaurant_id are constant.

Here’s what I’ve tried so far and here are the outputs:

field_data = $(this).data('fields')

start_pos = field_data.indexOf("side_dishes_attributes][")
end_pos = field_data.indexOf("][_destroy]", start_pos)
result_text = field_data.substring(start_pos, end_pos)
console.log("Result:", result_text)

Output:

Result: side_dishes_attributes][70208369492160][name]" placeholder="Name" size="30" type="text" />    <input id="menu_dishes_attributes_70208370296900_side_dishes_attributes_70208369492160__destroy" name="menu[dishes_attributes][70208370296900][side_dishes_attributes][70208369492160

And I’ve tried:

result = field_data.replace(/[^0-9]/g, "")
console.log(result)

Output:

227020836200328070208362003280702083620032803070208...

I have also tried playing around with this:

http://rubular.com/r/r5iowGGmw4

But I don’t know much about regular expressions to get this to work properly.

I’d appreciate any pointers. I’m doing all this in jQuery Coffeescript (but if you show me code in only jQuery, I can convert it over too).

Possible Answer?

start_pos = field_data.indexOf("side_dishes_attributes][") + 24
end_pos = field_data.indexOf("][name]", start_pos)
result_text = field_data.substring(start_pos, end_pos)
console.log("Result", result_text)

I got the right output using this but I was wondering if there is a better way.

Answer 1

If your HTML string is stored in a variable, say str, you can do:

var matches = str.match(/side_dishes_attributes_(\d+)_/);
var number = matches[1];

This will give you an array with two elements. The first is the full string that matches the regular expression “side_dishes_attributes_70308623619760”, and the second is the string captured by the parentheses, “70308623619760”. matches[1] will contain your number.

By leaving out the g modifier, the expression only matches once, so it will return the number contained in the id of the first input