如何用下划線替換數組中的某些字母

Question

我正在嘗試使文本將顯示在輸入框下方，其中一些字母應替換為下划線。 此文本將是用戶應該輸入以獲得正確輸出的答案。

我希望循環用_替換像 e 這樣的字母，但它什么也沒做。 沒有錯誤消息，它只是不替換字母 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;

Answer 1

您正在對單詞的單個字母而不是整個單詞使用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 文檔