0

I would like to replace special characters from the user input with other characters.

Currently, I have the following which does not work. Any help would be appreciated.

$(document).ready(function(){ 
        $("#text_box_id").change(function () {
            /*var name = $(this).val();
            var dname_without_space = $("#text_box_id").val().replace(/ /g, "");*/

            var specialCharList = ["Á","É","Í","Ó","Ú","á","é","í","ó","ú","ñ","Ñ"];
            var replaceChar = ["A","E","I","O","U","a","e","i","o","u","n","N"];

            var inputUser = $("#text_box_id").val();
            var splitInput = inputUser.split(" ");
            console.log(splitInput);

            for(var i = 0; i < inputUser.length; i++){
                for(var x = 0; x < specialCharList.length; x++){
                    if(splitInput[i] == specialCharList[x]){
                        splitInput[i] = replaceChar[x];
                    }
                }
            }

            var modInputUser = splitInput.join(" ");
            console.log(modInputUser);

            /*var name_without_special_char = $("#text_box_id").val().replace(/[^a-zA-Z 0-9]+/g, ""); 
            $(this).val(name_without_special_char);
            console.log(name_without_special_char)*/
        });
    });
user9808783
  • 129
  • 11

3 Answers3

1

You can split on the string (like you are already doing but without the space) and then run a map on each character by finding the index in the special characters list. If the index exists (return value is greater than -1), then you can use that index to get the value from the replacement characters list.

It would then look something like this:

$(document).ready(function() {
  $("#text_box_id").change(function() {

    let specialCharList = ["Á", "É", "Í", "Ó", "Ú", "á", "é", "í", "ó", "ú", "ñ", "Ñ"];
    let replaceChar     = ["A", "E", "I", "O", "U", "a", "e", "i", "o", "u", "n", "N"];

    let inputUser = $("#text_box_id").val();

    let newString = inputUser.split('').map(i => {
      let idx = specialCharList.indexOf(i)
      return idx > -1 ? replaceChar[idx] : i
    }).join('')

    $("#text_box_id").val(newString)
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="text_box_id">
Get Off My Lawn
  • 34,175
  • 38
  • 176
  • 338
0

Just don't split by spaces

$(document).ready(function(){ 
    $("#text_box_id").change(function () {
        /*var name = $(this).val();
        var dname_without_space = $("#text_box_id").val().replace(/ /g, "");*/

        var specialCharList = ["Á","É","Í","Ó","Ú","á","é","í","ó","ú","ñ","Ñ"];
        var replaceChar = ["A","E","I","O","U","a","e","i","o","u","n","N"];

        var inputUser = $("#text_box_id").val();
        var splitInput = inputUser.split("");
        console.log(splitInput);

        for(var i = 0; i < inputUser.length; i++){
            for(var x = 0; x < specialCharList.length; x++){
                if(splitInput[i] == specialCharList[x]){
                    splitInput[i] = replaceChar[x];
                }
            }
        }

        var modInputUser = splitInput.join("");
        console.log(modInputUser);

        /*var name_without_special_char = $("#text_box_id").val().replace(/[^a-zA-Z 0-9]+/g, ""); 
        $(this).val(name_without_special_char);
        console.log(name_without_special_char)*/
    });
});

This means to split every character:

var splitInput = inputUser.split("");
WilliamNHarvey
  • 2,335
  • 2
  • 17
  • 26
0

You can try this:

  function cleanString(str) {
     str = str.toLowerCase().replace(" ", "_");
     str = str.replace(/[äâàáã]/g, "a").replace(/[ëêèéẽ]/g, "e").replace(/[ïîìíĩ]/g, "i");
     str = str.replace(/[öôòóõ]/g, "o").replace(/[üûùúũ]/g, "u");
     str = str.replace(/ç/g, "c").replace(/[^a-z0-9]/g, "");
     return str;
  }

Test

cleanString("áéíóú") // returns "aeiou"
Topera
  • 12,223
  • 15
  • 67
  • 104