javascript - 是否可以使用纯 JS 实时正则表达式文本区域数据？

Question

所以这可能会让人感到有点困惑，但请尝试坚持我的观点。我需要实时正则表达式单个文本区域。我不需要与服务器进行任何通信，我只需要所有这些都在客户端即时完成。

上下文

目标是允许用户像这样输入数据；

苹果、芒果、橙子、香蕉、葡萄

但是当他们打字时，我希望客户端格式化正在键入的文本，

苹果 |芒果|橙色|香蕉|葡萄

我不太精通 Javascript，但如果有足够的时间，我可以找到解决办法。我自己尝试过一些事情，你可以在我的 JSFiddle 中看到。

我不确定我的思维过程对其他人来说是否清楚，但我已经设法获取数据并对其进行正则表达式，但我不确定如何在用户文本区域中实时更新它。

// 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);

任何有关此问题的帮助将不胜感激!

Answer 1

它不像您的项目那样以专业的方式(使用正则表达式、原型(prototype)等)，但嘿它有效。

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

$textarea.addEventListener('input',function(){
  $textarea.value = $textarea.value.replace(', ',' | ');
});

#textarea{
  width:660px;
}

<textarea id="textarea"></textarea>