用< span>包裹某些单词使用jquery

问题描述

我有以下 div ：

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

客户可以编写 SQL 查询。我试图做的是在用 span 命中之后用客户端输入的单词包装，并给这个跨度一个 class 根据输入的单词：

where Clients can write their SQL queries. What I was trying to do is wrap words the client enters right after hitting with a span and give this span a certain class according to the word typed:

示例

如果客户端类型选择我需要在div中包含这样的选择单词：

If the client types select i need to wrap this select word like this in the div:

<span class='select'> SELECT </span> <span> emp_name </span>

CSS

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

这是某事非常类似于 jsFiddle 。我怎样才能做到这一点？

It is something very similar to what jsFiddle does. How can i achieve this?

这是我到目前为止所尝试的：

Here is what i have tried so far : jsFiddle

$(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  ?
            }

        }
    });

});

推荐答案

我做了一个概念验证，并对其进行了一些修改你最初的。见下文，

I did a proof of concept with some modifications from what you originally had. See below,

部分完成，在中间编辑仍会使插入符号变得混乱。

3. Partially done, editing in the middle would still mess up the caret.

等等。 。

这篇关于用< span>包裹某些单词使用jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！