Replace specific letter from a word with input field

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;

Im writing a program which draw random letter from an array, and hide specific letters. Those hidden letters should be visible as input fields. I manage to create HTML with input fields, used replace method in js to replace those letters with empty space. I have no idea how to replace those empty spaces with input fields. So user can input correct letter and than check their grammar by that.

By creating HTML, CSS and JS, I manage to draw properly 4 words with blank spaces in place of specific letters. Whenever I try to add input field into those empty spaces it just does't work at all. Input fields are visible, but their are position accordingly to words, as written in css.

Answer 1

I think .replace(/[óu]/g, "<input>") is what you need

/[óu]/g is a regular expression that matches ó or 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>