how to mark last typed letter if it doesn't match with a predefined string

Question

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;
}

wendt88 · Answer

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)}${last}`)

how to mark last typed letter if it doesn't match with a predefined string

1 Answers