输入 JavaScript 后修改字符或单词

Question

假设我正在文本区域中输入“hello”一词。在我输入 hello 后，我如何选择我刚刚输入的单词并修改它。例如，在我输入“hello”一词后，无需按空格键，就识别出该词是“hello”，并在其前后添加 和 周围的单词。所以最终结果将是 hello 我知道 textarea 不接受 HTML，但为了论证。我能想到的唯一方法是每次用户按下一个键时运行一个函数，并将文本区域的内容添加到一个数组中，在空格处打破它。但这需要空格，并且交叉引用数组会花费时间。有办法轻松做到这一点吗？

Answer 1

如果您希望它在您键入时进行替换，那么您肯定必须捕获每个按键，但您不必测试空格。当我在 IE 中测试它时，以下内容有效：

$(function() {
   $("#yourtextareaidhere").keyup(function(e) {
      var updatedText = this.value.replace(
                               /(^|[^>])(hello)($|[^<])/gi, "$1<b>$2</b>$3");
      if (updatedText != this.value)
         this.value = updatedText;
   });
});

基本上在每次按键时都会进行字符串替换，以获取尚未被“>”包围的“hello”的所有实例。和“<” （包括“hello”位于字符串开头或结尾的位置），并替换为 “hello”。如果字符串替换的结果与字段中的结果不同（即，确实发生了某些替换），则新值将写回文本区域 - 我不只是每次都直接写回，因为这会丢失光标这对用户来说很烦人，我懒得想出比这个简单的“if”测试更好的解决方法。 （我之所以这样做是因为我为您提供了一个“起始位置”，然后将其余的留给您。）

这种方法考虑到了这样一个事实：用户可能不会一次性输入“hello”一词，例如，如果他们打错了字，最初是“我对你说你好”，然后返回并添加了“e”，那么你（大概）想要替换“你好”，即使它不在最后。我还进行了全局替换，这样如果用户粘贴“hello hello hello”，它们都会被替换。自行决定是否需要不区分大小写的替换。

如果您还想替换其他单词，则可以将它们添加到相同的正则表达式中（如果它们都只需要粗体标签），否则如果每个特殊单词都有自己所需的格式，则定义搜索正则表达式和替换字符串的数组并循环在函数内通过它们。

请注意，我的正则表达式有点生疏，所以如果有更好的方法来做同样的事情，我一点也不会感到惊讶，但我会将任何改进作为练习留给读者。

Answer 2

您可以使用 JQuery.keyup 函数来监听空格键按下。

$("textarea").keyup(function(event)
{ 
    var c= String.fromCharCode(event.keyCode);
    var isWhiteSpace = c.match(/\s/);
});

您可以使用分割和join 函数也可以完成您在问题后半部分所描述的内容。

编辑：这里有更多关于这个想法的信息： http://jsfiddle.net/ingenu8/ukkwM/

<div class="formatted"></div>
<textarea class="observed"></textarea>

和JS：

$(document).ready(function() {
    function hasHtml(str)
    {
        return str.match(/<b>.*?<\/b>/);
    }

    function formatStr(str)
    {
        var bits = str.split(/\s+/);
        var last = bits.pop();
        if(!last.match(/^\s*$/))
        {
            if(!hasHtml(last))
            {
                bits.push('<b>'+last+'</b>');
            }
        }
        return bits.join(' ');
    }

    setInterval(function() {
        var str = formatStr($('.observed').val());
        $('.formatted').html(str);
    }, 1000);
});