Question

让我们说我在textarea中输入“hello”这个词。在输入你好后，我将如何选择我刚刚输入的单词，并对其进行修改。例如，在我输入单词hello之后，没有按空格键，识别出单词hello，并在单词周围添加和之前和之后。所以最终的结果是hello我知道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;
   });
});

基本上在每个按键上都有一个字符串替换，以使“hello”的所有实例都没有被“＆gt;”包围和“＆lt;” （包括“hello”在字符串的开头或结尾处），并在"hello"中替换。如果字符串替换的结果与字段中的结果不同（即，确实发生了一些替换），那么新值将被写回textarea - 我不是每次都直接写回来因为丢失了光标对于用户来说很烦人的位置，我懒得想出一个比这个简单的“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/);
});

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

键入JavaScript后修改字符或单词

2 个答案: