My replace code using split and join only works for single word input and not for whole words

Question

I have a code that replaces the input string and replaces the specific words with other words. This works when I specific single words in the input

Example:

"BROWN" is replaced by "soil colored"

But if I add:

"a quick brown fox jumps over a lazy dog" and add "a quick bwown fox jumps ovew a wazy good boy", it does not work and shows the input in output field instead of the specified output.

Here is my code:

HTML:

<input id="input_1" type="text" value="" oninput="funcinput1()">
<button id="button_1 ml-auto copy-btn btn_cpy">translate</button>

<textarea id="output_1"></textarea>

JS:

function funcinput1() 
{

  let translator = {
    "a quick brown fox jumps over a lazy dog": "a quick bwown fox jumps ovew a wazy good boy",
    "BROWN": "soil colored",
    "quick": "fast",
    "the": "dee",
    "n":"\ud83d\udc68\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c\udffd"
  };
  
  var input = document.querySelector("#input_1");
  var output = document.querySelector("#output_1");
  
  input.addEventListener("input", () => {
    let words = input.value.split(' ');
    let translated = words.map(word => translator[word] || word);
    output.value = translated.join(' ');
  })
}

I am still a beginner so any help to resolve this issue would be appreciated.

Here's a Stack Snippet:

function funcinput1() 
{

  let translator = {
    "a quick brown fox jumps over a lazy dog": "a quick bwown fox jumps ovew a wazy good boy",
    "BROWN": "soil colored",
    "quick": "fast",
    "the": "dee",
    "n":"\ud83d\udc68\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c\udffd"
  };
  
  var input = document.querySelector("#input_1");
  var output = document.querySelector("#output_1");
  
  input.addEventListener("input", () => {
    let words = input.value.split(' ');
    let translated = words.map(word => translator[word] || word);
    output.value = translated.join(' ');
  })
}

<input id="input_1" type="text" value="" oninput="funcinput1()">
<button id="button_1 ml-auto copy-btn btn_cpy">translate</button>

<textarea id="output_1"></textarea>

You split up a string into single words.... how would it match multiple words? — epascarello

Unknown Unknown · Accepted Answer · 2020-12-30T16:19:08

When you enter the full phrase, you're splitting it up and checking each word separately. So you never look for the property "a quick brown fox jumps over a lazy dog" in your translation object, you look for "a" and "quick" and "brown", etc.

If you want to look for the whole thing as well, do that before splitting it:

var input = document.querySelector("#input_1");
var output = document.querySelector("#output_1");

input.addEventListener("input", () => {
    let text = input.value;
    let translated = translator[text]; // See if the whole thing has a translation
    if (!translated) {
        // It doesn't, try individual words
        let words = input.value.split(" ");
        translated = words.map(word => translator[word] || word).join(" ");
    }
    output.value = translated;
});

Live Example:

function funcinput1() {
    let translator = {
        "a quick brown fox jumps over a lazy dog": "a quick bwown fox jumps ovew a wazy good boy",
        "BROWN": "soil colored",
        "quick": "fast",
        "the": "dee",
        "n":"\ud83d\udc68\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c\udffd"
    };
    
    var input = document.querySelector("#input_1");
    var output = document.querySelector("#output_1");
    
    input.addEventListener("input", () => {
        let text = input.value;
        let translated = translator[text];
        if (!translated) {
            let words = input.value.split(" ");
            translated = words.map(word => translator[word] || word).join(" ");
        }
        output.value = translated;
    });
};

<input id="input_1" type="text" value="" oninput="funcinput1()">
<button id="button_1 ml-auto copy-btn btn_cpy">translate</button>

<textarea id="output_1"></textarea>

Of course you can spin this several ways. You could try to translate the whole thing, then the whole thing minus one character, then the whole thing minus two, etc., etc. Or you could approach it the other way and loop through the translator object's properties doing replacements. But that's the minimal change to do what you described with the full input.

My replace code using split and join only works for single word input and not for whole words

1 Answers