Replace function showing undefined in the console

Question

So, I was trying to create e encryption app, the app should take the value of the input and use the replace function to change the letters to the words that I specified in the function trocaLetras, but it just returns undefined in the console log.

This is my code:

var botaoCriptografar = document.querySelector('#criptografar');

function trocaLetras(conteudoInput) {
    conteudoInput.replace(/a/g, 'ai');
    conteudoInput.replace(/e/g, 'enter');
    conteudoInput.replace(/i/g, 'imes');
    conteudoInput.replace(/o/g, 'ober');
    conteudoInput.replace(/u/g, 'ufat');
}

botaoCriptografar.addEventListener('click', function(event){
    event.preventDefault();
    var texto = document.querySelector('#texto-para-coleta').value;
    var textoAtualizado = trocaLetras(texto);
    console.log(textoAtualizado);
});

<textarea id="texto-para-coleta"></textarea>
<button id="criptografar">Criptografar</button>

What did you expect, the function doesn't `return` anything. — Mina, Aug 06 '22 at 19:35
[JS dupe](https://stackoverflow.com/questions/12231644/js-replace-not-working-on-string), and [another JS dupe](https://stackoverflow.com/questions/1891052/javascript-replace-doesnt-work), and [another JS dupe](https://stackoverflow.com/questions/38825984/replace-javascript-not-working), and a [chaining JS dupe](https://stackoverflow.com/questions/1433212/replace-method-doesnt-work) — mplungjan, Aug 06 '22 at 20:12

score 0 · Answer 1 · answered Aug 06 '22 at 19:41

The replace function will actually not change the value in the variable, but instead returns a string with the replaced characters. So you must chain multiple calls of replace.

Also your function needs to return the result. So your function works if you change it to this:

function trocaLetras(conteudoInput) {
    return conteudoInput.replace(/a/g, 'ai')
                        .replace(/e/g, 'enter')
                        .replace(/i/g, 'imes')
                        .replace(/o/g, 'ober')
                        .replace(/u/g, 'ufat');
}

score -1 · Answer 2 · answered Aug 06 '22 at 19:38

two issues here

.replace doesn't change the original variable value. so if you do

let s = 'some';
s.replace('some', 'else');
console.log(s); // 'some'

so your function needs to reassign the value, or you can create a new one.

javascript function needs explicit returns, so if you don't return anything, it'll show up as undefined.

function trocaLetras(conteudoInput) {
    conteudoInput = conteudoInput.replace(/a/g, 'ai');
    conteudoInput = conteudoInput.replace(/e/g, 'enter');
    conteudoInput = conteudoInput.replace(/i/g, 'imes');
    conteudoInput = conteudoInput.replace(/o/g, 'ober');
    conteudoInput = conteudoInput.replace(/u/g, 'ufat');
    return conteudoInput;
}

const botaoCriptografar = document.getElementById('button');

botaoCriptografar.addEventListener('click', function(event){
    event.preventDefault();
    var texto = document.querySelector('#texto-para-coleta').value;
    var textoAtualizado = trocaLetras(texto);
    console.log(textoAtualizado);
});

<button id='button'>Encrypt</button>

<input id="texto-para-coleta" />

Replace function showing undefined in the console

2 Answers2