CODEWITHSUNDEEP
javascriptjquery
user7401447
user7401447

Reputation: 35

JS or jQuery to compare two texts character by character

It should compare the texts and update it. I am using onkeyup for each time text is updated.

$(document).ready(function() {
  $("#color").keyup(validate);
});


function validate() {
  var password1 = $("#color").val();
  var pass = $('#coltext').text();
  var length = $("#color").val().length;

  for (int i = 0; i < length; i++) {
    if (pass[i] == password1[i]) {
      $("#coltext").css("color", "green"); //make only correct character green
    } else {
      $("#coltext").css("color", "red");
    }
  }
}
<input id="color" type="text" />
<p id="coltext">This</p>

So what I want to do is whenever I type the "This" written should update character by character, green for correct and red for wrong. You can say like what typing tutor does.

Upvotes: 1

Views: 1485

Answers (2)

Divyesh
Divyesh

Reputation: 161

<!DOCTYPE html>
<html>
<body>
<script>
var x = "Cancelled";
var y = "Cancelled";
if(x==y)
{
    alert("equal");
}
else
{
    alert("not equal");
}
</script>

</body>
</html>

Upvotes: 1

I wrestled a bear once.
I wrestled a bear once.

Reputation: 23379

You have to break the password into spans in order to style them seperately, then to compare then use $("#coltext span").eq(i).text() instead of pass[i];

$(document).ready(function() {
  $("#color").keyup(validate);
});


function validate() {
  var password1 = $("#color").val();
  
  // put each of your password chars in a span
  var pass = "<span>"+$('#coltext').text().split("").join("</span><span>")+"</span>";
  $('#coltext').html(pass);
  
  var length = $("#color").val().length;

  for (var i = 0; i < length; i++) {
    if ($("#coltext span").eq(i).text() == password1[i]) {
      $("#coltext span").eq(i).css("color", "green"); //make only correct character green
    } else {
      $("#coltext span").eq(i).css("color", "red");
    }
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="color" type="text" />
<p id="coltext">This</p>

Upvotes: 4

Related Questions