CODEWITHSUNDEEP
javascript
Lewis
Lewis

Reputation: 2188

Is it possible to regex textarea data in realtime with Pure JS?

So this may come across as a little confusing but do try to stick with me. I have the need to regex a single textarea in real time. I do not need any communication with the server I just need all these to be done client side on the fly.

Context

The goal is to allow the user to input data like so;

Apple, Mango, Orange, Banana, Grape

But as theyre typing I want the client to format the text being typed to,

Apple | Mango | Orannge | Banana | Grape

I'm not that versed in Javascript but I can find my way around given enough time. I have attempted something myself which you can see here in my JSFiddle

I'm not sure if my thought process is clear to others but I have managed to get the data and regex it, but I'm unsure on how update it in real time in the users textarea.

// calculate characters left & position ...
function _set() {
  // Init
  var str = document.getElementById("one").value;
  var regex = new RegExp(',', 'g');

  // replace via regex
  str = str.replace(regex, ' | ');
  document.getElementById("print").innerHTML = str;
}

print.addEventListener('input', _set);
_set.call(text);

Any help with this would be greatly appreciated!

Upvotes: 0

Views: 225

Answers (2)

yuriy636
yuriy636

Reputation: 11671

It's not in a professional way like your project (with RegEx, prototypes and such) but hey it works.

var $textarea = document.getElementById('textarea');

$textarea.addEventListener('input',function(){
  $textarea.value = $textarea.value.replace(', ',' | ');
});
#textarea{
  width:660px;
}
<textarea id="textarea"></textarea>

Upvotes: 1

Mettin Parzinski
Mettin Parzinski

Reputation: 898

Have you tried using replace like this?

str.replace(/ \, /g, ' | ');

(Replace any comma that has a space before and after with a pipe, before and after)

Upvotes: 0

Related Questions