Javascript 用<；span>；使用jquery

我有以下

div

：

<div id="query" style="width:500px; height:200px;border:1px solid black"
 spellcheck="false" contenteditable="true"></div>​

CSS

这与

jsFiddle

的功能非常相似。我怎样才能做到这一点

以下是我迄今为止所尝试的：

$（函数（）{
$（'div'）.focus（）；
$（'div'）.keyup（函数（e）{
//console.log（例如keyCode）；
如果（e.keyCode==32）{
var txt=$（'div'）.text（）；
var x='选择'；
$（'div:contains（“+x+”））。换行（“”）；
如果（txt==“选择”）{
console.log（'found'）；//为什么这没有任何作用？
}
}
});
});

我做了一个概念验证，对您最初拥有的进行了一些修改。见下文

演示：

$（函数（）{
$（'div'）.focus（）；
var x=['SELECT'，'WHERE'，'FROM']；
$（'div'）.keyup（函数（e）{
//console.log（例如keyCode）；
如果（e.keyCode==32）{
//使用.text（）删除上一个span插入
var text=$.trim（$（this.text（））.split（“”）；
$。每个（文本、函数（i、v）{
$。每个（x，函数（j，xv）{
如果（v.toUpperCase（）==xv）{
文本[i]=“v+”；
}                                        
});
});
$（this.html（text.join（“”）+“”）；
setEndOfContenteditable（此）；
}
});
函数setEndOfContenteditable（contentEditableElement）{
var范围、选择；
if（document.createRange）//Firefox、Chrome、Opera、Safari、IE 9+
{
range=document.createRange（）；//创建一个范围（一个范围与所选内容类似，但不可见）
range.selectNodeContents（contentEditableElement）；//选择具有范围的元素的全部内容
range.collapse（false）；//将范围折叠到终点。false表示折叠到终点而不是起点
selection=window.getSelection（）；//获取选择对象（允许您更改选择）
selection.removeAllRanges（）；//删除所有已做的选择
selection.addRange（range）；//使刚刚创建的范围成为可见的选择
}
else if（document.selection）//IE 8及更低版本
{
range=document.body.createTextRange（）；//创建一个范围（范围与所选内容类似，但不可见）
range.moveToElementText（contentEditableElement）；//使用范围选择元素的全部内容
range.collapse（false）；//将范围折叠到终点。false表示折叠到终点而不是起点
range.select（）；//选择范围（使其成为可见选择
}
}
});

你要进一步扩展它来处理吗

退格

以前插入的HTML内容

游标位置部分完成，中间的编辑仍会使插入符号混乱。

---

还有更多..

从

contenteditable

元素开始，我们可以直接在其

innerHtml

上操作来替换标记：

$('#query-container').on('keyup', function(e){
  var $this = $(this);
  //(?!\<\/b\>) negative lookahead is used so that anything already wrapped
  //into a markup tag would not get wrapped again
  $this.html($this.html().replace(/(SELECT|UPDATE|DELETE)(?!\<\/b\>)/gi, '<b>$1</b>'));
  setEndOfContenteditable(this);
});

$（“#查询容器”）。在（'keyup'，函数（e）上{
var$this=$（this）；
//（？！\）使用负前瞻，以便任何已包装的内容
//在标记中，将不会再次包装标记
$this.html（$this.html（）.replace（/（选择|更新|删除）（？！\）/gi，$1'）；
setEndOfContenteditable（此）；
});

---

在我看来，这是一个更具可读性的选项。添加上一个答案中的rangeselect方法，我们有

谢谢..看起来不错，但为什么它会在发射后的所有跨度的开始处聚焦？@MinaGabriel在您使用脚本更改textarea的值后，插入符号会转到开始处。您可以通过在upd之前获取插入符号位置来修复此问题ate并在更新后设置。.第二步：防止插入符号跳跃。@MinaGabriel设置/设置插入符号位置见此，你真聪明，伙计

.select{color:blue ;text-transform:uppercase;}

$(function(){
    $('div').focus() ;
    $('div').keyup(function(e){
        //console.log(e.keyCode) ;
        if(e.keyCode == 32){
            var txt = $('div').text() ;
            var x = 'SELECT' ;
            $('div:contains("'+x+'")').wrap("<span style='color:blue ;
      text-transform:uppercase;'>") ;
            if(txt == 'SELECT'){
                console.log('found') ; // why This Doesn't do any thing  ?
            }

        }
    });

});

$(function() {
    $('div').focus();
    var x = ['SELECT', 'WHERE', 'FROM'];
    $('div').keyup(function(e) {
        //console.log(e.keyCode) ;
        if (e.keyCode == 32) {

            //using .text() remove prev span inserts
            var text = $.trim($(this).text()).split(' ');            
            $.each(text, function(i, v) {
                $.each(x, function(j, xv) {
                    if (v.toUpperCase() === xv) {
                        text[i] = '<span style="color: blue; text-transform: uppercase;">' + v + '</span>';    
                    }                                        
                });
            });

            $(this).html(text.join(' ') + '&nbsp;');

            setEndOfContenteditable(this);
        }
    });

    function setEndOfContenteditable(contentEditableElement) {
        var range, selection;
        if (document.createRange) //Firefox, Chrome, Opera, Safari, IE 9+
        {
            range = document.createRange(); //Create a range (a range is a like the selection but invisible)
            range.selectNodeContents(contentEditableElement); //Select the entire contents of the element with the range
            range.collapse(false); //collapse the range to the end point. false means collapse to end rather than the start
            selection = window.getSelection(); //get the selection object (allows you to change selection)
            selection.removeAllRanges(); //remove any selections already made
            selection.addRange(range); //make the range you have just created the visible selection
        }
        else if (document.selection) //IE 8 and lower
        {
            range = document.body.createTextRange(); //Create a range (a range is a like the selection but invisible)
            range.moveToElementText(contentEditableElement); //Select the entire contents of the element with the range
            range.collapse(false); //collapse the range to the end point. false means collapse to end rather than the start
            range.select(); //Select the range (make it the visible selection
        }
    }
});

$('#query-container').on('keyup', function(e){
  var $this = $(this);
  //(?!\<\/b\>) negative lookahead is used so that anything already wrapped
  //into a markup tag would not get wrapped again
  $this.html($this.html().replace(/(SELECT|UPDATE|DELETE)(?!\<\/b\>)/gi, '<b>$1</b>'));
  setEndOfContenteditable(this);
});