Make substring uneditable within larger div string, while also preserving the unique substring CSS (distinct from rest of text styling in div)

Question

Setup: Below is a tweet example appearing as an editable text: "First words of tweet, @tweetaddress last words of tweet"

Requirement and Problem: I'd like the user to be able to edit the text, but NOT change the @tweetaddress, which I have working. However, I also would like the @tweetAddress to be color:blue while the rest of the text is color:white. I can achieve this result initially through the use of a span wrapped around the @tweetaddress. (shown is code below.)

I'm fine on JavaScript detecting if the @tweetaddress has changed. BUT...

The problem: ...if the user starts typing right next to the @tweetaddress, the styling from the 'never-change' class applies to all the new text. Is there a way to limit my to only include the @tweetaddress, so that all new text into the div is outside it and not blue?

I've tried initially putting different spans on either side of the @tweetaddress 'never-change' span, but if the user deletes the characters in the other spans and then retypes, the new letters still come out blue.

I'd really love to hear any ideas on how I could proceed.

HTML

<div contenteditable id="text-input" placeholder="Tweet text here">First words of tweet,<span class="never-change">@tweetaddress</span> last words of tweet</div>

CSS:

.never-change{
    color:blue;
}

JS:

$('#text-input').keydown(function() {
    textStart = $(this).html();
    tweetAddress = '@tweetaddress';
} 
$('#text-input').keyup(function() {
    textEnd = $(this).text();
    if (textEnd.indexOf(placeholderText) > -1){
        return false;
    } else {
        alert("Twiiter name. Cannot edit");
    $(this).html(textStart);
}

Thank you in advance.