Replace text in textarea after string match and key event-CodePudding

Problem - Unable to replace text within textarea when a string match is found

Expected outcome - For specific string "Dave" to get replaced with longformText variable when keyup event occurs

Current outcome - .replace() method on e.target.value string is not replacing text when a match of "Dave" is found. I want the replacement to happen the moment a match is found or after entering a space

Heres my code so far - I'm watching for every textarea elements on page

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>

CodePudding user response：

First of all, I would be careful about how to apply eventlistener to elements. What your does code right now, is apply a eventlistener on every element you click on. I would instead, set an eventlistener for onchange or input on the textarea elements themselves. Then trigger an event when the word dave appears. I've written a working example below :)

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>

CodePudding user response：

You are not assigning value to your current Element. Here I updated a little JS code please check.

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>

CodePudding user response：

Here is the JS i came up with, along with a 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)
    })
}

I do enjoy how your requirements cause an infinite loop of Daves each keypress!