用输入字段替换单词中的特定字母

Question

const startButton= document.getElementById("startButton");
const resultButton = document.getElementById("resultButton");
const word1Element = document.getElementById("word1");
const word2Element = document.getElementById("word2");
const word3Element = document.getElementById("word3");
const word4Element = document.getElementById("word4");
const input1Element = document.getElementById("inputOne");
const input2Element = document.getElementById("inputTwo");
const input3Element = document.getElementById("inputThree");
const input4Element = document.getElementById("inputFour");
const countElement = document.getElementById("counter");
const modalInstructionsElement = document.getElementById("instructions");
const modalResultElement = document.getElementById("result");
const modalInstructionsCloseElement = document.getElementById("instructionsClose");
const modalResultCloseElement = document.getElementById("resultClose");




let result;
function randomWords () {
    word1Element.style.display = "block";
    word2Element.style.display = "block";
    word3Element.style.display = "block";
    word4Element.style.display = "block";
const words = [
    "kółko", "muzyka", "odór", "kukułka", "lupa", "buk", "półka", "kufel", "kultura", "chór",
    "muzeum", "rura", "kukułka", "róg", "lufa", "łuk", "łosoś", "kurtka", "budynek",
     "kukułka", "suknia", "ucho", "gorąco", "bułka", "szukanie", "podróż", "góra", "usta",
      "bukiet", "klucz", "łuk", "okrągły", "ludzie", "bułka", "kruk", "król", "żuraw", "kubek",
       "bukiet", "mówić", "płótno", "ludność", "kuracja", "kutia", "ubranie", "ukośny", "bukiet",
        "bruk", "kultura", "ruch", "buda", "kurczak", "dusza", "łuk", "kupować", "trudność", "brud",
         "skurczybyk", "słońce", "lód", "kupa", "lukier", "brud", "kusza", "tłum", "kufel", "duma", 
         "kupa", "pukanie", "kuracja", "burza", "kurtka", "smród", "bułka", "mur", "kultura", "buzia",
          "kurczak", "kąt", "żurawina", "łuk", "kula", "ukośny", "bukiet", "turysta", "urodziny", 
          "kufel", "buzia", "młodzież", "kuferek", "bujny", "ucieczka", "kuracja", "kutia", "rzut", 
          "bukiet", "wulkan", "kucyk", "uśmiech"
];
let wordOne = words[Math.floor(Math.random() * words.length)];
let inputOne = wordOne
.replace("ó", " ")
.replace("u", " ");
let wordTwo = words[Math.floor(Math.random() * words.length)];
let inputTwo = wordTwo
.replace("ó", " ")
.replace("u", " ");
let wordThree = words[Math.floor(Math.random() * words.length)];
let inputThree = wordThree
.replace("ó", " ")
.replace("u", " ");
let wordFour = words[Math.floor(Math.random() * words.length)];
let inputFour = wordFour
.replace("ó", " ")
.replace("u", " ");
let randomWord = `${inputOne}, ${inputTwo}, ${inputThree}, ${inputFour}`;

word1Element.innerHTML = inputOne;
word2Element.innerHTML = inputTwo;
word3Element.innerHTML = inputThree;
word4Element.innerHTML = inputFour;
return randomWord;
};

startButton.onclick = randomWords;

我正在编写一个程序，从数组中抽取随机字母，并隐藏特定字母。这些隐藏的字母应该作为输入字段可见。我设法创建带有输入字段的 HTML，使用 js 中的替换方法将这些字母替换为空格。我不知道如何用输入字段替换这些空白。这样用户就可以输入正确的字母并通过它检查语法。

通过创建 HTML、CSS 和 JS，我成功地正确绘制了 4 个单词，并用空格代替了特定字母。每当我尝试将输入字段添加到这些空白区域时，它根本不起作用。输入字段是可见的，但它们的位置根据单词而定，如 css 中所写。

Answer 1

我想

.replace(/[óu]/g, "<input>")

就是你所需要的

/[óu]/g

是匹配

ó

或

u

的正则表达式

const word1Element = document.getElementById("word1");

let result;

function randomWords() {
  word1Element.style.display = "block";
  const words = [
    "kółko", "muzyka", "odór", "kukułka", "lupa", "buk", "półka", "kufel", "kultura", "chór",
    "muzeum", "rura", "kukułka", "róg", "lufa", "łuk", "łosoś", "kurtka", "budynek",
    "kukułka", "suknia", "ucho", "gorąco", "bułka", "szukanie", "podróż", "góra", "usta",
    "bukiet", "klucz", "łuk", "okrągły", "ludzie", "bułka", "kruk", "król", "żuraw", "kubek",
    "bukiet", "mówić", "płótno", "ludność", "kuracja", "kutia", "ubranie", "ukośny", "bukiet",
    "bruk", "kultura", "ruch", "buda", "kurczak", "dusza", "łuk", "kupować", "trudność", "brud",
    "skurczybyk", "słońce", "lód", "kupa", "lukier", "brud", "kusza", "tłum", "kufel", "duma",
    "kupa", "pukanie", "kuracja", "burza", "kurtka", "smród", "bułka", "mur", "kultura", "buzia",
    "kurczak", "kąt", "żurawina", "łuk", "kula", "ukośny", "bukiet", "turysta", "urodziny",
    "kufel", "buzia", "młodzież", "kuferek", "bujny", "ucieczka", "kuracja", "kutia", "rzut",
    "bukiet", "wulkan", "kucyk", "uśmiech"
  ];
  let wordOne = words[Math.floor(Math.random() * words.length)];
  let inputOne = wordOne
    .replace(/[óu]/g, "<input>")

  let randomWord = `${inputOne}`;

  word1Element.innerHTML = inputOne;
  return randomWord;
};

randomWords()

input {
  width: 1rem;
}

<p id="word1"></p>