如何同時將正則運算式應用于多個輸入

我是編程新手，試圖應用一個正則運算式，用破折號（'-'）替換每個空格（''），但 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>

uj5u.com熱心網友回復：

只需使用 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

標籤：javascript 数组 验证 输入 节点列表

上一篇：pydanticbasemodel“欄位”僅用于驗證目的

下一篇：ASP.net使用RoleManager創建角色問題