問題- 找到字串匹配時無法替換 textarea 中的文本
預期結果longformText-當 keyup 事件發生時，特定字串“Dave”被替換為變數
當前結果-.replace()找到匹配“Dave”時，e.target.value 字串上的方法不會替換文本。我希望在找到匹配項時或進入空格后進行替換
到目前為止，這是我的代碼 - 我正在關注頁面上的每個 textarea 元素
let longformText = 'my name is Dave';
let currentEl;
const regex = /Dave/i;
window.onclick = (e) => {
currentEl = e.target;
currentEl.addEventListener('change', (e) => {
if (e.target.value.includes('Dave')) {
console.log(true);
e.target.value.replace(regex, longformText);
}
});
};<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<p>Enter some text</p>
<textarea name="" id="" cols="30" rows="10"></textarea>
<textarea name="" id="" cols="30" rows="10"></textarea>
<textarea name="" id="" cols="30" rows="10"></textarea>
<textarea name="" id="" cols="30" rows="10"></textarea>
<textarea name="" id="" cols="30" rows="10"></textarea>
<textarea name="" id="" cols="30" rows="10"></textarea>
<script src="snippet.js"></script>
</body>
</html>uj5u.com熱心網友回復：
首先，我會小心如何將事件監聽器應用于元素。您現在所做的代碼是在您單擊的每個元素上應用事件偵聽器。相反，我會在 textarea 元素本身上為 onchange 或 input 設定一個事件監聽器。然后當單詞 dave 出現時觸發一個事件。我在下面寫了一個作業示例:)
let longformText = 'my name is Dave';
let currentEl;
const regex = /Dave/i;
const textAreaElements = document.querySelectorAll("textarea");
textAreaElements.forEach(textArea => {
textArea.addEventListener("input", e =>{
let value = e.target.value;
console.log(value)
if(regex.test(value)){
console.log("Match!");
let newValue = value.replace(regex, longformText);
e.target.value = newValue;
}
})
})<body>
<p>Enter some text</p>
<textarea name="" id="" cols="30" rows="10"></textarea>
<textarea name="" id="" cols="30" rows="10"></textarea>
<textarea name="" id="" cols="30" rows="10"></textarea>
<textarea name="" id="" cols="30" rows="10"></textarea>
<textarea name="" id="" cols="30" rows="10"></textarea>
<textarea name="" id="" cols="30" rows="10"></textarea>
<script src="snippet.js"></script>
</body>uj5u.com熱心網友回復：
您沒有為當前元素分配價值。在這里我更新了一點JS代碼，請檢查。
let longformText = 'my name is Dave';
let currentEl;
const regex = /Dave/i;
window.onclick = (e) => {
currentEl = e.target;
currentEl.addEventListener('change', (e) => {
if (e.target.value.includes('Dave')) {
console.log(true);
e.target.value = e.target.value.replace(regex, longformText);
}
});
};<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<p>Enter some text</p>
<textarea name="" id="" cols="30" rows="10"></textarea>
<textarea name="" id="" cols="30" rows="10"></textarea>
<textarea name="" id="" cols="30" rows="10"></textarea>
<textarea name="" id="" cols="30" rows="10"></textarea>
<textarea name="" id="" cols="30" rows="10"></textarea>
<textarea name="" id="" cols="30" rows="10"></textarea>
<script src="snippet.js"></script>
</body>
</html>uj5u.com熱心網友回復：
這是我想出的 JS，還有一個 codepen。
https://codepen.io/webdevjones/pen/LYQPZaM
let longformText = 'my name is Dave';
const textAreas = document.querySelectorAll('textarea')
for(let i = 0; i < textAreas.length; i){
textAreas[i].addEventListener('keyup', (e) => {
textAreas[i].value = textAreas[i].value.replace(/Dave/i, longformText)
})
}
我很喜歡您的要求如何導致 Daves 每次按鍵都無限回圈！
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/467266.html
標籤：javascript html dom dom 事件
上一篇：有沒有辦法在JS中將一個鍵的值設定為與同一物件中另一個鍵的值相同？
下一篇：將v-if與深層屬性物件一起使用