如何用 jQuery 实现这个交互模型？答案

【问题标题】：How can I implement this interaction model with jQuery?如何用 jQuery 实现这个交互模型？
【发布时间】：2010-07-18 18:37:34
【问题描述】：

使用 jQuery，我有兴趣创建以下交互模型。

当用户在页面中键入时，jQuery 随时注意到三个 !, "!!!"连续输入，以便能够对其进行处理。
在注意到三个 !、“!!!”后，将前一句换行（从用户当前键入的位置查找最后一个句点并换行 <span class=Important>

我该怎么做？

【问题讨论】：

用户输入的是<input/>、<textarea>，还是其他？
用户正在输入一个 TEXTAREA
文本被换行后，您希望将!!! 从文本区域中删除，还是保留在那里？

标签： javascript jquery dom binding

【解决方案1】：

这应该可行。我已将其设置为实时事件处理程序（以便它适用于动态添加到页面的元素），但您也可以在任何 textarea 或 input 元素上使用与普通 keyup 处理程序完全相同的功能.

它检查元素的当前值是否以!!! 结尾，如果是则执行替换，两者都使用简单的正则表达式。

$("input,textarea").live("keyup", function() {
    var $this = $(this);
    var value = $this.val();

    if (/!!!$/.test(value)) {
        $this.val(value.replace(/(\.?)([^.]+?\.?\s*)!!!$/, '$1<span class="important">$2</span>'));
    }
});

【讨论】：

很好的答案。我正要发布类似的东西。
非常酷的主意！它似乎并没有起作用，只是还以为是 IF 出了点问题
另外，这会根据句点抓取最近的句子吗？
看起来是 $this.val(value.replace 坏了
该代码要求在前面加上句号，这不适用于第一句。我使它成为可选的。 jsbin.com/abira3/3/edit

【解决方案2】：

尽管我很讨厌说 jQuery 对某些东西不好——也许这种逻辑在服务器上处理得更好。除非他们在 HTML 编辑器中输入，而新插入的 span 标签对用户是不可见的，否则在 textarea/textbox 中输入并突然看到我的评论中插入了一堆 HTML 可能有点令人不安。

【讨论】：