是否有可能在纯JS中实时正则化文本区域数据?

Question

这可能会让人感到有点困惑，但请尽量跟着我。我需要实时正则化一个文本区域。我不需要与服务器进行任何通信，我只需要所有这些都可以在客户端上完成。

上下文

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

苹果,芒果,橘子,香蕉,葡萄

但是当他们输入时，我想让客户端格式化输入的文本，

苹果|芒果| Orannge | |香蕉葡萄

我不是精通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, ' | ');

(将任何前后有空格的逗号替换为前后有管道的逗号)