How to make a field that recognizes letters and numbers with Javascript?

Question

How to make an <imput> field that recognizes letters and number and ignores spaces or capital spelling?

Below is what I have done so far, my goal is that the feedback is "right" when 9 H 6 U 8 f is written in the field, even if there is no space between characters or even if the letters aren't capitalized.

function F1() {

  antw = parseFloat(document.getElementById("userAnswer").text);
  feedBack = document.getElementById("feedBack");
  ant = document.getElementById("answer").textContent;
  {
    if (antw == ant) {
      feedBack.textContent = "Right";

    } else {
      feedBack.textContent = "Wrong";
    }
  }
}

<button onclick="F1()">check</button>
<input id="userAnswer" type=text>
<p id="feedBack"> </p>
Write:<label id="answer"> 9 H 6 U 8 f</label>

All `` will recognize alphanumeric, whitespaces, and are case-insensitive. — zer00ne, Apr 12 '20 at 00:26

score 2 · Accepted Answer · answered Apr 12 '20 at 00:27

You need to remove all the spaces from both values using

.replace(/\s+/g, '')

and then convert both to lowercase using

.toLowerCase()

and then you can compare them independent of case and whitespace:

function F1() {
  feedBack = document.getElementById("feedBack");
  antw = document.getElementById("userAnswer").value.replace(/\s+/g, '').toLowerCase();
  ant = document.getElementById("answer").textContent.replace(/\s+/g, '').toLowerCase();
  {
    if (antw == ant) {
      feedBack.textContent = "Right";

    } else {
      feedBack.textContent = "Wrong";
    }
  }
}

<button onclick="F1()">check</button>
<input id="userAnswer" type="text">
<p id="feedBack"> </p>
Write:<label id="answer"> 9 H 6 U 8 f</label>

Note that to get the contents of an input element you use .value, not .text.

score 2 · Answer 2 · answered Apr 12 '20 at 00:32

The best way to compare the two strings is to convert both to lowercase and remove all whitespace. There are several ways (and places in your code) to do this, but I suggest making a second function to process the strings. This way, your functions only do one thing each.

const trimAndLowerCase = (input) => {
  return input.replace(/\s+/g, '').toLowerCase();
}

const f1 = () => {
  const input = document.getElementById('userAnswer').value;
  const answer = document.getElementById('answer').textContent;
  const feedback = document.getElementById('feedBack');

  if (trimAndLowerCase(input) === trimAndLowerCase(answer)) {
    feedback.textContent = 'Right';
  } else {
    feedback.textContent = 'Wrong';
  }
}

Edit: In case you’re wondering, the code above uses the arrow function expression to create the functions. If you need IE compatibility, you will have to use the old function f1() syntax.

score 1 · Answer 3 · answered Apr 12 '20 at 00:29

One option is to use a regex to strip spaces from your string in your javascript function before deeming it right or wrong :

str = str.replace(/\s/g, '');

The above code will remove spaces. See this answer for a runnable snippet.

Regarding the case, use the javascript toLowerCase function to de-capitalise any CAPITAL letters The toLowerCase() function works even if there is numbers in the string; it just affects the letters. So 9 H R would become 9 h r etc..

Hope this helps

zer00ne · Answer 4 · 2020-04-12T01:48:13.173

You could simplify the strings before comparing them. Details are commented in demo.

// Reference the <form>
const ver = document.forms.verify;

// Regiter the <form> to the "submit" event
ver.onsubmit = matchText;

// Event handler function passes the event Object
function matchText(event) {

  /* 
  Stop default behavior of <form> when "submit" event is   
  triggered. Default behavior is that <form> values are 
  sent to a server and then <form> is reloaded.
  */
  event.preventDefault();
  
  // Collect all form fields into an array-like object
  const field = this.elements;
  
  /*
  Get the text of <output id='captcha'> and call
  simpleText() (see the end of code) to remove spaces and
  change to lower case
  */
  let compareTo = simpleText(field.captcha.textContent);
  
  // Likewise for the value of <input id='data'>
  let userInput = simpleText(field.data.value);
  
  /*
  if the two strings are exactly the same, render the HTML
  of <output id='result'> as <i>RIGHT!</i> otherwise set it
  to <b>WRONG!</b>
  */
  let result = compareTo === userInput ? `<i>RIGHT!</i>` : `<b>WRONG!</b>`;
  field.result.innerHTML = result;
}

// Utility function passes thru a string
function simpleText(string) {

  /* 
  split() the string up by removing all spaces then convert
  the string into an array of letters. join() the letters
  together back into a string.
  */
  let text = string.split(' ').join('');
  
  // return string to lower case
  return text.toLowerCase();
}

input, button, output {display: inline-block; font: 400 3vw/1.5 Verdana}
#data {width: 10ch}
#captcha {color: goldenrod}
#result i {color: lime; font-weight: 900}
#result b {color: tomato}

<form id='verify'>
  <input id='data' type='text'><input type='submit' value='VERIFY'><hr>
  <output id='captcha'>9 H 6 U 8 f</output>
  &nbsp;&nbsp;&nbsp;&nbsp;
  <output id='result'></output>
</form>

How to make a field that recognizes letters and numbers with Javascript?

4 Answers4