输入后修改字符或单词 JavaScript

Question

假设我在文本区域中输入单词“hello”。在我输入 hello 之后，我将如何选择我刚刚输入的单词并进行修改。例如，在我键入单词 hello 后，没有按空格键，识别出单词是 hello，并在单词前后添加 <b> 和 </b>。所以最终结果将是<b>hello</b> 我知道textarea 不采用HTML，但为了争论。我能想到的唯一方法是每次用户按下一个键时运行一个函数，并将 textarea 的内容添加到一个数组中，在空格处打破它。但这需要空格，而且必须交叉引用数组需要时间。有没有办法轻松做到这一点？

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

基本上在每次按键时都会进行字符串替换，以获取尚未被“>”和“"<b>hello</b>"。如果字符串替换的结果与字段中的结果不同（即确实发生了一些替换），那么新值将被写回 textarea - 我不只是每次都直接写回它，因为这会丢失光标这对用户来说很烦人，我懒得想出比这个简单的“if”测试更好的解决方法。 （我的理由是我为您提供了一个“起点”，其余的交给您。）

这种方法允许用户可能没有一次性输入单词“hello”，例如，如果他们打错字并且最初输入“I say hello to you”，然后返回并添加“e ” 那么你（大概）想要替换“你好”，即使它不是在最后。我还进行了全局替换，这样如果用户粘贴“hello hello hello”，它们都会被替换。如果您需要不区分大小写的替换，请自行决定。

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

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

Answer 2

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

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

您也可以使用split 和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);
});