Wile typing a text I want to compare it with another one
if typed text is not equal with the beginning part of the another - I need to mark the last typed letter
mark - means change background color or any other way to make it visible different
here is my try - getting error - last.css is not a function
for example - try to type - lorex - so x should be marked

var story = $('#story');
var a = 'lorem';
story.on('input', function(){
    let b = story.text().trim();
    if(!a.startsWith(b)){
        let last = b.slice(-1);
        console.log(last);
        last.css('background', 'orange');  // error line
    }
});

.story{
    white-space:pre-wrap;
    -webkit-user-modify: read-write-plaintext-only;
    line-height:25px;
    padding:14px 20px;
    border:none; outline:none;
  background:orange;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='story' id='story'></div>

CodePudding user response：

here is a small example:

const span = document.createElement('span');
span.style.backgroundColor = 'orange';
span.innerText = last;
story.textContent = b.slice(0, -1);
story.after(span);

with jQuery:

story.html(`${b.slice(0, -1)}<span style="background-color: orange;">${last}</span>`)