Problema : no se puede reemplazar el texto dentro del área de texto cuando se encuentra una coincidencia de cadena
Resultado esperado : para que la cadena específica "Dave" se reemplace con la variable longformText cuando ocurra un evento keyup
Resultado actual : el método .replace() en la cadena e.target.value no reemplaza el texto cuando se encuentra una coincidencia de "Dave". Quiero que el reemplazo ocurra en el momento en que se encuentra una coincidencia o después de ingresar un espacio
Aquí está mi código hasta ahora: estoy buscando todos los elementos de área de texto en la página
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>En primer lugar, tendría cuidado con la forma de aplicar eventlistener a los elementos. Lo que hace en el código en este momento es aplicar un detector de eventos en cada elemento en el que hace clic. En su lugar, establecería un eventlistener para onchange o input en los propios elementos del área de texto. Luego active un evento cuando aparezca la palabra dave. He escrito un ejemplo de trabajo a continuación :)
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>No está asignando valor a su Elemento actual. Aquí actualicé un pequeño código JS, verifique.
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>Aquí está el JS que se me ocurrió, junto con un 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) }) }¡Disfruto cómo sus requisitos causan un bucle infinito de Daves cada vez que presiona una tecla!