上一篇: 首选jQuery工具提示？下一篇:jquery – wordpress菜单,如多级...

Jquery / Javascript – 语法高亮显示在contentEditable区域中的用户类型

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了Jquery / Javascript – 语法高亮显示在contentEditable区域中的用户类型，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我正在我的网站上开发一个contentEditable区域,用户可以在其中键入消息.

<div contentEditable="true" class="smartText">User types here...</div>

事情是,我们将内置智能文本,这意味着如果用户在此div内部输入@usersame,如果用户名存在,则@username应以蓝色突出显示,如果不存在则为绿色.当然,所有这一切都应该发生在用户键入…

我不知道从哪里开始,现在我有这个：

$("body").on("keyup",".smartText",function(){
      var $this = $(this),value = $this.html(),regex = /[^>]#\S+[^ ]/gim;
      value = value.replace(regex,"<span style='color:red'>$&</span>");
      $this.html(value);
});

但文字不断跳跃(以及插入位置),并不觉得正确的方向.我想这是一个有点类似于JSfiddle的颜色代码,因为它找到它.
我基本上想要和Twitter一样的东西.

这是一个JSfiddle玩的：http://jsfiddle.net/denislexic/bhu9N/4/

在此先感谢您的帮助.

解决方法

我喜欢这个问题,我很努力地解决.我相信我终于成功了(有一点帮助).

= updatED =

代码：

[...]

// formatText
formatText: function (el) {
    var savedSel = Helper.saveSELEction(el);
    el.innerHTML = el.innerHTMl.replace(/<span[\s\S]*?>([\s\S]*?)<\/span>/g,"$1");
    el.innerHTML = el.innerHTMl.replace(/(@[^\s<\.]+)/g,Helper.highlight);

    // Restore the original SELEction
    Helper.restoreSELEction(el,savedSel);
}

[...]

// point
keyup: function(E){                    

    // format if key is valid
    if(Helper.keyIsAvailable(E)){
        Helper.formatText($this[0]);
    }

    // delete blank html elements
    if(Helper.keyIsdelete && $this.text()=="") {
        $this.html("");
    }
}