Jquery / Javascript - 在contentEditable区域中突出显示为用户类型的语法 [英] Jquery/Javascript - Syntax highlighting as user types in contentEditable region

问题描述

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

 < div contentEditable =trueclass =smartText>此处的用户类型...< / div> 
  

问题是，我们内部会有智能文字，这意味着如果用户输入 @usersame 在此div内，如果用户名存在， @username 应以蓝色突出显示，如果不存在则应为绿色。当然所有这一切都应该在用户输入时发生......

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

  $（body）。on（keyup，。smartText，function（）{
 var $ this = $（这个），
 value = $ this.html（），
 regex = / [^>]＃\ S + [^] / gim; 
 value = value.replace（正则表达式， < span style ='color：red'> $&< / span>）; 
 $ this.html（value）; 
}）; 
  

但文字不断跳跃（以及插入位置）并且感觉不对方向。我想这与JSFiddle有点相似，它会在找到它时为代码着色。
我基本上想和Twitter一样。

这是一个可以使用的JSFiddle：

需要的外部资源：

• http：// dl .dropboxusercontent.com / u / 14243582 / jscalc / js / rangy-core.js


• http://dl.dropboxusercontent.com/u/14243582/jscalc/js/rangy-selectionsaverestore.js

帮助者问题（谢谢）： 替换contenteditable div中的innerHTML

正则表达式测试工具（谢谢）： http://www.pagecolumn.com/tool/regtest.htm

I'm developing a contentEditable region on my website, where users will be able to type messages to each other.

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

The thing is, we will have smart text inside, meaning that if a user type @usersame inside this div, the @username should be highlighted in blue if the username exist and green if he doesn't exist. And of course all of this should happen as the user types...

I have no idea where to start, right now I have this:

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

But the text keeps jumping (as well as the caret position) and doesn't feel like the right direction. I guess it's a little similar to JSFiddle which colors code as it finds it. I basically want the same thing as Twitter has.

Here is a JSFiddle to play around with: http://jsfiddle.net/denislexic/bhu9N/4/

Thanks in advance for your help.

解决方案

I liked this problem and I worked very hard to solve. I believe I have finally succeeded (with a little assistance).

= UPDATED =

Piece of Code:

[...]

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

Screenshot:

JSFiddle here: http://jsfiddle.net/hayatbiralem/9Z3Rg/11/

Needed External Resources:

• http://dl.dropboxusercontent.com/u/14243582/jscalc/js/rangy-core.js
• http://dl.dropboxusercontent.com/u/14243582/jscalc/js/rangy-selectionsaverestore.js

Helper Question (thanks): replace innerHTML in contenteditable div

Regex Test Tool (thanks): http://www.pagecolumn.com/tool/regtest.htm

这篇关于Jquery / Javascript - 在contentEditable区域中突出显示为用户类型的语法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！