如何同時將正則表達式應用於多個輸入

Question

我是編程新手，試圖應用一個正則表達式，用破折號（'-'）替換每個空格（''），但 querySelectorAll（）返回一個 NodeList，經過一番努力試圖從中獲取一個數組，所以我可以使用 forEach ()，現在我介入了這個錯誤。

如果可能的話，我確實打算使用其他一些正則表達式來驗證某些字段中是否有 http/https，所以如果解決方案確實允許我稍后應用其他正則表達式，那就太棒了

 const reset = document.querySelector(".reset-button"); const submit = document.querySelector("#generate-utm"); const form = document.querySelector(".data-form"); const inputs = document.querySelectorAll(".data-input"); const copyButton = document.querySelector(".copy-button"); Array.from(inputs).forEach(() => { addEventListener("keyup", (e) => { e.value = e.value.replace(/ /g, "-"); }); }); //end inputs logic // buttons logic submit.addEventListener("click", (e) => { e.preventDefault(); const url = document.querySelector(".url").value; const source = document.querySelector(".source").value; const type = document.querySelector(".type").value; const name = document.querySelector(".name").value; const term = document.querySelector(".term").value; const content = document.querySelector(".content").value; const output = document.querySelector(".data-output"); output.value = `${url}?utm_source=${source}&utm_medium=${type}&utm_campaign=${name}&utm_term=${term}&utm_content=${content}`; }); reset.addEventListener("click", (e) => { e.preventDefault(); reset.classList.toggle("rotate"); form.reset(); }); copyButton.addEventListener("click", (e) => { e.preventDefault(); const dataOutput = document.querySelector(".data-output"); if (!navigator.clipboard) { dataOutput.select(); document.execCommand("copy"); } else { navigator.clipboard .writeText(dataOutput.value) .then(function () { alert("abrir popup!"); }) .catch(function () { alert("Erro ao copiar, tente copiar manualmente"); }); } }); // end buttons logic

 <header> <h1 class="heading">Gerador de UTM<span style="color: hsl(360, 69%, 42%);">.</span></h1> </header> <main> <div class="data-inputs section"> <form class="data-form"> <div class="input-wrapper"> <div class="left"> <input type="text" class="data-input url" placeholder="URL do site"> <input type="text" class="data-input source" placeholder="Fonte da campanha"> <input type="text" class="data-input type" placeholder="Tipo da campanha"> </div> <div class="right"> <input type="text" class="data-input name" placeholder="Nome da campanha"> <input type="text" class="data-input term" placeholder="Termos da campanha"> <input type="text" class="data-input content" placeholder="Conteúdo da campanha"> </div> </div> <div class="send-data"> <input type="submit" class="button" id="generate-utm" value="Gerar UTM"> <button class="reset-button"> refresh </button> </div> </form> </div> <div class="value-inputs section"> <textarea id="" cols="30" rows="10" class="data-output" placeholder="Sua UTM aparecerá aqui" disabled></textarea> <input type="submit" class="button copy-button" value="Copiar"> </div> </main>

Answer 1

只需使用 e.target 訪問實際的 HTML 元素。

這是更新的代碼：

Array.from(inputs).forEach(() => {
  addEventListener("keyup", (e) => {
  //console.log("evaluacion",e.target)
    e.target.value = e.target.value.replace(/ /g, "-");
  });
});

//end inputs logic

// buttons logic