How to convert a string like 1/4 from a text box to numeric in javascript

Question

How to convert a string like 1/4 from a text box to numeric in javascript.

<form>
  <input type='text' name='inputText' value='1/4'>
</form>
<script>
    var text=DOCUMENT.getElementsByName('inputText')[0].value;
</script>

How to convert text to numeric?

At all costs, avoid `eval`. It's a dangerous function that could open your software to malicious code. Check [this SO question](https://stackoverflow.com/questions/16037033/alternative-to-eval-javascript) for alternatives to eval. — LordAlpaca, Mar 09 '18 at 13:45
@LordAlpaca—unlikely. The user can open a console and run whatever script they want in the page anyway, or use Greasemonkey or similar. Anyone who can inject code into the *eval* part can likely inject *eval* too. ;-) — RobG, Mar 09 '18 at 13:50
You could implement a shunting yard algorithm and RPN evaluation algorithm to allow users to input some arbitrary numbers/expressions, you could use eval, you could check string contents manually to see what type of number was entered, there's a few ways to do this — Nick is tired, Mar 09 '18 at 13:56

rafaelgomesxyz · Answer 1 · 2018-03-09T14:04:04.627

Without using eval, you could do this:

function convertValue(value) {
  let parts = value.split("/");
  let dividend = parseFloat(parts[0]);
  let divisor = parseFloat(parts[1]);
  if (isNaN(dividend) || isNaN(divisor) || divisor === 0) {
      return "Cannot divide";
  }
  return dividend / divisor;
}

console.log(convertValue("1/4")); // 0.25
console.log(convertValue("10/2")); // 5
console.log(convertValue("-8/2")); // -4
console.log(convertValue("6/-2")); // -3
console.log(convertValue("0.5/0.25")); // 2
console.log(convertValue("a/b")); // Cannot divide
console.log(convertValue("5/0")); // Cannot divide

Instead of regex, I'd simply use `isNaN`. – georg Mar 09 '18 at 13:57 — georg, Mar 09 '18 at 13:57

score 0 · Accepted Answer · answered Mar 09 '18 at 13:24

you could use eval() method for this:

var text = document.getElementsByName('inputText')[0].value;
document.getElementsByName('inputText2')[0].value = eval(text);

<form>
  <input type='text' name='inputText' value='1/4'>
  <input type='text' name='inputText2'>
</form>

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval

baeyun · Answer 3 · 2018-03-09T13:40:58.393

0

Evaluate it:

<form>
  <input type='text' name='inputText' value='1/4'>
</form>

  <script>
    var text = eval(document.getElementsByName('inputText')[0].value);
    
    console.log(text); // returns: 0.25
</script>

edited Mar 09 '18 at 13:40

answered Mar 09 '18 at 13:25

baeyun

228
1
6

gurvinder372 · Answer 4 · 2018-03-09T13:33:36.923

First sanitize the value

var fnSanitize = str => !"1/s4".match( /[^-+*/\d+]/g )

Above function will check if the value has anything else apart from 0-9 and +-*\. You can add more operators like () as well.

Now evaluate the expression

var evalExpression = str => fnSanitize( str ) ? eval( str ) : "";

Demo

var fnSanitize = str => !str.match(/[^-+*/\d+]/g)

var evalExpression = str => fnSanitize(str) ? console.log(eval(str)) : console.log("Bad expression");

document.querySelector("#check").addEventListener("click", function() {
  evalExpression(document.querySelector("#inputText").value);
})

<form>
  <input type='text' id='inputText' value='1/4'>
  <button id="check">Check</button>
</form>
<script>
</script>

Or via Function constructor

var evalExpression = str => fnSanitize( str ) ? new Function( "return " str ) : "";

Demo

var fnSanitize = str => !str.match(/[^-+*/\d+]/g)
var evalExpression = str => fnSanitize( str ) ? console.log(new Function( "return " + str )()) : console.log("Bad expression"); 

document.querySelector("#check").addEventListener("click", function() {
  evalExpression(document.querySelector("#inputText").value);
});

<form>
  <input type='text' id='inputText' value='1/4'>
  <button id="check">Check</button>
</form>
<script>
</script>

How to convert a string like 1/4 from a text box to numeric in javascript

4 Answers4