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>

arguments is undefined. If arguments is supposed to be the value of the input, you need to use this.value instead of this and also add it to the function parameters. — spaceman, Apr 23 '16 at 12:36
Well of course it can be done in many ways as shown below however this is not the correct approach for this type of jobs. You should either a) insert codes to correct indexes in an array and access them by their indexes such as `codes[0] = "J"` or b) use a property value array like object such as `obj = {"0": "j", "1": "A", "2":"B",....}` and access `"J"` with `obj["0"]` or c) use ES6 map or set functionality. — Redu, Apr 23 '16 at 13:06

score 5 · Accepted Answer · edited Apr 23 '16 at 12:41

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>

Nina Scholz · Answer 2 · 2016-04-23T13:23:52.813

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>

edited Apr 23 '16 at 13:23

answered Apr 23 '16 at 12:33

Nina Scholz

376,160
25
347
392

Suggestion: Move `chars, codes` var outside of function. `chars` is redundant, use the `index` of `codes` elements. – Tushar Apr 23 '16 at 12:58
@Tushar, thank you for the hints, i could make it smaller, with better perfomance an so on, but i think, that the simple numbers are only an example, which could be replace with some other characters and not in the same order as above. – Nina Scholz Apr 23 '16 at 13:02
Note that regex will behave differently/throw error when meta-characters are passed to `RegExp` constructor example `[`, better to use `[0-9]` in this case. – Tushar Apr 23 '16 at 13:03

isvforall · Answer 3 · 2016-04-23T13:04:31.007

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'));

Tushar · Answer 4 · 2016-04-23T12:50:09.903

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>

Replacing repeated characters not working

4 Answers4