Блог

Я пытаюсь сделать так, чтобы текст отображался под полем ввода, при этом некоторые буквы должны быть заменены символами подчеркивания. Этот текст будет ответом, который пользователь должен ввести, чтобы получить правильный вывод.

Я ожидал, что цикл заменит буквы, такие как e, на the _ , но он ничего не делает. Сообщений об ошибках нет, он просто не заменяет букву e. Я попытался создать for цикл, который я нашел в других местах, для замены определенных символов из элемента массива, но ничего не получилось.

Вот код JS:

 let array = ['blue', 'green', 'red', 'orange', 'pink', 'silver', 'purple', 'lime']
let arraySecond = ['blue', 'green', 'red', 'orange', 'pink', 'silver', 'purple', 'lime']; 

//The other array is the one that shows the element, 
//that matches the first array, but with "_", instead of certain letters

document.getElementById('check').addEventListener('click', thisFunction);

function thisFunction() {
   let value = document.getElementById('input').value;
   
   if (value == theColor) {
    alert(`Congrats you gussed right, its ${value}`)
        } else {
    alert(`Oof, your guess was incorrect, it's ${array[randomizedArray]}`)
    }
}

let randomizedArray = Math.floor(Math.random() * array.length);

let theColor = array[randomizedArray]; 

//One thing the code above is used for is be in the for loop, to replace letters

for (let i = 0; i < theColor.length; i  ) {
    theColor[i] = theColor[i].replace('e', '_');
} 

//This loop that should do the replacing, but it doesn't work

document.getElementById('output').innerHTML = theColor;
  

Вы используете replace функцию для отдельных букв слова, а не для всего слова — вам не нужно перебирать каждую букву, чтобы заменить их.

В зависимости от того, что именно вы хотите заменить, вы можете сделать это следующим образом (используя e в качестве примера):

• Замените первый экземпляр буквы: theColor.replace('e', '_');
• Замените все экземпляры буквы: theColor.replace(/e/g, '_'); — обратите внимание, что / … /g означает выполнить глобальный поиск и заменить.
• Замена без учета регистра: добавление /gi к приведенному выше theColor.replace(/e/gi, '_');

Однако я предполагаю, что вы захотите заменить не только одну конкретную букву, поэтому вы можете заменить несколько букв за один раз (например, a, e, i, o и u) следующим образом:

• Замените все экземпляры нескольких букв: theColor.replace(/aeiou/gi, '_'); — выполняется ли замена без учета регистра для всех букв между / и /gi с _

Примеры:

 var theColor = "green";
console.log("Replace first instance of e in " theColor ": " 
              theColor.replace('e', '_'));

var theColor = "GREeN";
console.log("Replacing all instances of e (case insensitive) in " theColor ": " 
              theColor.replace(/e/gi, '_'));

var theColor = "orange";
console.log("Replacing all vowels in one go in " theColor ": "
              theColor.replace(/[aeiou]/gi, '_'));  

Например, в вашем коде для замены всех гласных (a, e, i, o или u) вам просто нужно сделать что-то вроде этого:

 document.getElementById('output').innerHTML = theColor.replace(/[aeiou]/gi, '_');
  

Обратите внимание, не изменяйте значение theColor напрямую, потому что это то, с чем вы сравниваете предположение. Строка выше заменяет только отображаемый цвет, а не название самого цвета.

Рабочий пример

 let array = ['blue', 'green', 'red', 'orange', 'pink', 'silver', 'purple', 'lime']
let arraySecond = ['blue', 'green', 'red', 'orange', 'pink', 'silver', 'purple', 'lime'];

//The other array is the one that shows the element, 
//that matches the first array, but with "_", instead of certain letters
document.getElementById('check').addEventListener('click', thisFunction);

function thisFunction() {
  let value = document.getElementById('input').value;

  if (value == theColor) {
    alert(`Congrats you gussed right, its ${value}`)
  } else {
    alert(`Oof, your guess was incorrect, it's ${array[randomizedArray]}`)
  }
}

let randomizedArray = Math.floor(Math.random() * array.length);
let theColor = array[randomizedArray];

/* THIS IS WHERE THE NEW CODE IS
   DISPLACE THE COLOR WITH ALL a,e,i,o OR u REPLACED WITH _ */
document.getElementById('output').innerHTML = theColor.replace(/[aeiou]/gi, '_');  

 <input id="input">
<button id="check">Check</button>
<div id="output"></div>  

Ссылка: Документы MDN для функции replace