是否可以使用 Pure 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

它不像您的项目那样以专业的方式（使用 RegEx、原型等），但它确实有效。

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

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

#textarea{
  width:660px;
}

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

Answer 2

你试过这样使用replace吗？

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

（将前后有空格的逗号替换为竖线，前后）