CODEWITHSUNDEEP
javascriptextract
M_B
M_B

Reputation: 13

Extract value from string in JavaScript

I'm quite new to JavaScript, so the code below can be pretty bad. I'm just trying to extract a value from a string. I know parseFloat() would probably not be the solution, but is there any function that would allow for that?

p id="1" would contain some random text and end with a value.

Here below my example: 

<div id="abc">
<p id="1">abc 0.99</p>
<p id="2">-</p>
<button onclick="GetValue()">Extract value</button>
</div>

<script>
function GetValue() {
    var Value = parseFloat(document.getElementById("1").innerHTML);
    document.getElementById("2").innerHTML = Value;
}
</script>

Any suggestion is much appreciated!

The suggestion from this other thread JavaScript get number from string worked, thanks for pointing that out! Updated code:

<div id="abc">
<p id="1">abc 0.99</p>
<p id="2">-</p>
<button onclick="GetValue()">Extract value</button>
</div>

<script>
function GetValue() {
    var String = document.getElementById("1").innerHTML;
    var Value = String.replace( /^\D+/g, '');
    document.getElementById("2").innerHTML = Value;
/*  
Solution 2> var Value = String.replace(/^.*?(-?([0-9]+|[0-9]*[.][0-9]+))[ \t]*$/gi,'$1');
Solution 3> var Value = String.match(/\d+(\.\d+)?/)[0];
*/
}
</script>

Upvotes: 1

Views: 13437

Answers (4)

lumio
lumio

Reputation: 7575

When the structure of your string is always like "textspacenumber" where number is always at the end, you could just split the string and use the last item:

const str = "abc 0.99";
const tokens = str.split( ' ' );
const number = parseFloat( tokens[ tokens.length - 1 ] );
console.log( number );

This is way simpler than using RegEx (which is fine too, but slower)

Upvotes: 1

RocketNuts
RocketNuts

Reputation: 11120

parseFloat is fine, if you really need the numerical value. The "some random text and end with a value" part can be a bit tricker, depending on what that text can be. (for example can it contain other numbers?)

Here's a way to do it with regular expressions:

var s = document.getElementById('1').innerHTML;
s = s.replace(/^.*?(-?([0-9]+|[0-9]*[.][0-9]+))[ \t]*$/gi,'$1');
var x = parseFloat(s);
document.getElementById('2').innerHTML = x;

Explanation of the 2nd line: this is a regular expression that extracts a numerical part from the end of a string. A 'numerical part' here may start with a minus sign (for negative numbers), and then either just a bunch of digits (for integer values), or zero or more digits followed by a decimal point followed by one or more decimals. I've added [ \t]* to also allow for some optional whitespace at the end.

This can look pretty crazy if you're not familiar with regular expressions.

By the way, since you're only putting the result back into your HTML content, there is actually no need for parseFloat. You can just put the resulting s (which is still a string but only the number, with the content before number stripped away) straight back into the HTML.

If you are doing actual calculations with the number, then yes, use parseFloat(s).

Upvotes: 0

Samuel Rizzon
Samuel Rizzon

Reputation: 149

Try this:

function GetValue() {
    var myValue = document.getElementById("1").textContent;
    document.getElementById("2").innerHTML = myValue;
}

Note: You were trying to assign value to a system variable - Value.

Code runing: https://jsfiddle.net/2ohf65hc/

Upvotes: -1

Mihai Alexandru-Ionut
Mihai Alexandru-Ionut

Reputation: 48357

You can use following regex:

var str = "abc 0.99";
let number=str.match(/\d+(\.\d+)?/)[0];
alert(number);

Regex Explanation

  • 0-9 : Matches any number
  • . : Matches . literal
  • + : Matches previous group one or more time

Upvotes: 3

Related Questions