I'm trying to multiply the amounts in a recipe using regex replace.

Here is the example HTML code

<div id="ingredients">
    <ul>
        <li>2 bananas, sliced</li>
        <li>1 cup frozen strawberries</li>
        <li>8 oz. low fat vanilla yogurt</li>
    </ul>
</div>

I got as far as here. I'm trying to find a way to multiply the matched number and then replace the old one with the multiplied one:

var str   = document.getElementById('ingredients').innerHTML;
var regex = /[0-9]+(?:\.[0-9]*)?/g;
str = str.replace(regex, "$&" * 2);
console.log(str)​

But this is the output I get:

<ul>
    <li>NaN bananas, sliced</li>
    <li>NaN cup frozen strawberries</li>
    <li>NaN oz. low fat vanilla yogurt</li>
</ul>

Can anyone please point me to the right direction on how to convert "$&" to a float so I can multiply it?

Many thanks!

I'm trying to multiply the amounts in a recipe using regex replace.

Here is the example HTML code

<div id="ingredients">
    <ul>
        <li>2 bananas, sliced</li>
        <li>1 cup frozen strawberries</li>
        <li>8 oz. low fat vanilla yogurt</li>
    </ul>
</div>

I got as far as here. I'm trying to find a way to multiply the matched number and then replace the old one with the multiplied one:

var str   = document.getElementById('ingredients').innerHTML;
var regex = /[0-9]+(?:\.[0-9]*)?/g;
str = str.replace(regex, "$&" * 2);
console.log(str)​

But this is the output I get:

<ul>
    <li>NaN bananas, sliced</li>
    <li>NaN cup frozen strawberries</li>
    <li>NaN oz. low fat vanilla yogurt</li>
</ul>

Can anyone please point me to the right direction on how to convert "$&" to a float so I can multiply it?

Many thanks!

• javascript
• regex
• pattern-matching
• recipe

• Just out of curiosity, what do you expect to get by multiplying 2 bananas by 1 cup of strawberries? 2 cup-pieces of bananaberries? – Igor Korkhov Commented Feb 14, 2012 at 15:54
• @Igor I believe he is trying to double the recipe (multiplying all values by a constant), not multiplying disparate quantities. – Phrogz Commented Feb 14, 2012 at 15:56
• Exactly, I'm trying to increase the servings of a recipe dynamically by knowing how many servings it is initially and by providing to the user a bobox with additional values. – Riccardo Bartoli Commented Feb 14, 2012 at 18:12
• IMHO you should not even consider this kind of solution. Avoid using the DOM for data storage and instead consider it as just the presentation layer. You could create an object something like var ingredients = [ {'name': banana, sliced', 'qty': 2}, ... ] and add methods to this object to perform various processing (e.g. add a method responsible for updating quantities and perform pluralization of some nouns). Next, you can use any JS frameworks (like redux+react) to have this object represented in the page. – ktx Commented Dec 25, 2015 at 17:48

1 Answer 1

You have to parse string as a number before you can multiply it:

str = str.replace(/[0-9]+(?:\.[0-9]*)?/g, function(m) { return 2*parseFloat(m)+''; });

You cannot multiply strings in javascript !

"" * 2 // NaN