Typewriter effect with highlighting

Referencing http://stackoverflow.com/questions/22180457/typewriter-effect-for-html-with-javascript and http://stackoverflow.com/questions/10254441/how-to-create-a-highlighting-effect-in-css3-javascript

by Augustus Yuan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="typewriter-text">Hi Travis!! ^_^ <span class="highlight-1">Context</span> is going to be awesome yay!!!!!!! Here are some <span class="highlight-2">dogs racing</span>.=

CSS

.highlight-1 {
    background-size: 0 100%;
    background-repeat: no-repeat;
    -webkit-transition: background-size 0.5s ease-out 2s;
    -moz-transition: background-size 0.5s ease-out 2s;
    -ms-transition: background-size 0.5s ease-out 2s;
    -o-transition: background-size 0.5s ease-out 2s;
    transition: background-size 0.5s ease-out 2s;
}

.highlight-2 {
    background-size: 0 100%;
    background-repeat: no-repeat;
    -webkit-transition: background-size 0.5s ease-out 3s;
    -moz-transition: background-size 0.5s ease-out 3s;
    -ms-transition: background-size 0.5s ease-out 3s;
    -o-transition: background-size 0.5s ease-out 3s;
    transition: background-size 0.5s ease-out 3s;
}

.highlight {
    background: -webkit-linear-gradient(yellow, yellow);
    background: -moz-linear-gradient(yellow, yellow);
    background: -ms-linear-gradient(yellow, yellow);
    background: -o-linear-gradient(yellow, yellow);
    background: linear-gradient(yellow, yellow);
    background-size: 100% 100%;
}

JavaScript

var str = $('.typewriter-text')[0].innerHTML,
    i = 0,
    isTag;

console.log(str);

(function type() {
    text = str.slice(0, ++i);
    $('.typewriter-text')[0].innerHTML = text;
    if (text === str) { callback(); return; }
    
    var delay = Math.round(Math.random()*100) + 30
    var char = text.slice(-1);
    if( char === '<' ) isTag = true;
    if( char === '>' ) isTag = false;

    if (isTag) return type();
    setTimeout(type, delay);
}());

function callback() {
    setTimeout(function(e) {
        $('.highlight-1, .highlight-2').addClass('highlight');
    }, 300);
}