textarea根据输入不合法的内容变色

Question

在textarea中输入内容，当里面有不合法的词语时把不合法的词语变成红色（警示显示）。无法显示该内容,有什么好方法解决

Answer 1

这就相当于一个简版的文本编辑器了。textarea同步获取输入的内容。

var textRefer = document.getElementById('text-refer'),

  textInput = document.getElementById('text-input');

textInput.addEventListener('keyup', function() {

  var val = textInput.value;

  val = val.replace(/[\n\t\s]+/g, ''); // 去除换行、Tab、空格

  val = val.replace(/([^\w+])/g, '<span class="red">$1</span>'); // 匹配符号

  textRefer.innerHTML = val; // 设置 HTML

});