如何同时将正则表达式应用于多个输入
How to apply regex to multiple inputs at the same time
我是编程新手,尝试应用一个正则表达式,将每个 space (' ') 替换为破折号 ('-'),但 querySelectorAll() returns 一个 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>
只需使用 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
我是编程新手,尝试应用一个正则表达式,将每个 space (' ') 替换为破折号 ('-'),但 querySelectorAll() returns 一个 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>
只需使用 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