Replacing repeated characters not working

Question

When I put "123" value into input field it will convert properly to letter "ABC", but when I type "112" it only convert first number like this "A1B" I need "112" to be convert into "AAB". However, the repeated characters are not replaced.

 function char_convert() { var chars = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"]; var codes = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"]; for (x = 0; x < chars.length; x++) { for (i = 0; i < arguments.length; i++) { arguments[i].value = arguments[i].value.replace(chars[x], codes[x]); } } } char_convert(this); 

 <div id="test"> <input type="text" id="txtBox" onchange="char_convert(this);" /> </div> 

Answer 1

You can split value and loop over it and replace necessary value.

 var chars = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"]; var codes = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"]; function char_convert(el) { el.value = el.value.split("").map(function(c) { return codes[chars.indexOf(c)]; }).join(""); } 

 <div id="test"> <input type="text" id="txtBox" onchange="char_convert(this);" /> </div> 

Answer 2

You need a flag g for global replacement. And a RegExp instance instead of a string.

new RegExp(chars[x], 'g')

Working example:

 function char_convert() { var chars = ["1","2","3","4","5","6","7","8","9","0"], codes = ["A","B","C","D","E","F","G","H","I","J"], i, j; for(x = 0; x < chars.length; x++){ for (i = 0; i < arguments.length; i++) { arguments[i].value = arguments[i].value.replace(new RegExp(chars[x], 'g'), codes[x]); } } } 

 <div id="test"> <input type="text" id="txtBox" onchange="char_convert(this);"/> </div> 

A more compact version:

 function char_convert(s) { var xx = { '1': 'A', '2': 'B', '3': 'C', '4': 'D', '5': 'E', '6': 'F', '7': 'G', '8': 'H', '9': 'I', '0': 'J' }; Object.keys(xx).forEach(c => { s.value = s.value.replace(new RegExp(c, 'g'), $1 => xx[$1]); }); } 

 <div id="test"> <input type="text" id="txtBox" onchange="char_convert(this);"/> </div> 

Answer 3

You could use Regex with flag g

arguments[i].value = arguments[i].value.replace(new RegExp(chars[x], 'g'), codes[x]);

But your first for loop is redundant, you could use just indexOf function

 var chars = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"]; var codes = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"]; function char_convert(str) { return str.split('').map(e => codes[chars.indexOf(e)]).join(''); } document.write(char_convert('12321')); 

Answer 4

You can do this in single statement, no need of nested loops. Use the RegEx [0-9] to match a single digit and g flag to match all possible numbers.

// Keep single array, use index of the element
var codes = ['J', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'];
var str = '112';

// Replace all the elements by it's code from array
str = str.replace(/[0-9]/g, m => codes[m]);
console.log(str);

 var codes = ['J', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I']; document.getElementById('test').addEventListener('keyup', function() { var str = this.value; str = str.replace(/[0-9]/g, m => codes[m]); // Same as // str = str.replace(/[0-9]/g, function(m) { // return codes[m]; // }); document.getElementById('output').innerHTML = str; }, false); 

 <input id="test" /> <div id="output"></div>