如何使用jQuery实现此交互模型？

Question

使用jQuery,我有兴趣创建以下交互模型.

1. 当用户输入页面时,jQuery会随时注意到三个!,"!!!" 输入一行,以便能够做些什么.

2. 在注意到三个!,"!!!"之后,包装上一句(从用户当前正在键入的位置找到最后一个句点并包装 <span class=Important>

我怎样才能做到这一点？

Answer 1

这应该工作.我已将其设置为实时事件处理程序(以便它适用于动态添加到页面的元素),但您也可以使用与任何textarea或input元素上的普通键盘处理程序完全相同的函数.

它检查元素的当前值是否结束,!!!如果是,则使用简单的正则表达式执行替换.

$("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>'));
    }
});