javascript/jqueryコンテンツ編集可能な構文の強調表示

Question

私は問題があります：カーソルの位置です。

は最初から開始している

$('div').on('keyup', function() { 

    var search = $(this), 
     pattern = /(SELECT|FROM|WHERE|DELETE)/gi, 
     result = search.text().replace(pattern, '<span class="sql">$1</span>'); 



    $(this).html(result); 

    $('p').html(result); 


}); 

私のフィドルは：https://jsfiddle.net/yoxkjouf/

この問題

Answer 1

1-修正するためにどのようにpタグ

2 - $(this).html doesnのを持っていません意味をなさない。 cuzの、それは入力ボックスである

$('div').on('keyup', function() { 
 

 
    var search = $(this), 
 
     pattern = /(SELECT|FROM|WHERE|DELETE)/gi, 
 
     result = search.text().replace(pattern, '<span class="sql">$1</span>'); 
 

 
    $('p').html(result); 
 

 
});

body { 
 
    margin: 50px auto 0; 
 
    width: 500px; 
 
    font-family: sans-serif; 
 
    background-color: #f1f1f1 
 
} 
 
[contenteditable]:empty:before { 
 
    content: attr(data-placeholder); 
 
    font-size: 15px; 
 
    color: #a4a4a4; 
 
    cursor: text; 
 
} 
 
[contenteditable]:focus:before { 
 
    visibility: hidden 
 
} 
 
p { 
 
    color: #fff; 
 
    padding: 10px; 
 
    background-color: #000; 
 
    height: 150px 
 
} 
 
.sql { 
 
    color: #4CAF50 
 
} 
 
div { 
 
    border: 1px solid #ccc; 
 
    background-color: #000; 
 
    color: #fff; 
 
    padding: 10px 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h2>Type: SELECT or DELETE</h2> 
 
<div contenteditable="true" data-placeholder="Type text"></div> 
 
<p> 
 
</p>