javascript/jquery Syntax highlighting with contenteditable

Question

I have problem with: cursor position.

Is starting from the beginning

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


});

My fiddle: https://jsfiddle.net/yoxkjouf/

How to fix this problem

score 1 · Answer 1 · answered Feb 07 '17 at 17:53

1- You do not have a p tag

2- $(this).html doesn't make sense. Cuz, it is an input box

$('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>

javascript/jquery Syntax highlighting with contenteditable

1 Answers1