用JS比较和标记字符串中的单词

Question

需要帮助，我想比较和标记像这张图片

这个词

https://i.stack.imgur.com/Ffdml.png

我尝试使用js但没有运气

<div class="form-group">
    <div class="col-md-6">
        <section class="form-group-vertical">
            <input class="form-control" type="text" id="1">
        </section>
    </div>
    <div class="col-md-6" id="notif">
        <section class="form-group-vertical">
            <input class="form-control" type="text" id="2" >
        </section>
    </div>
</div>

<script type="text/javascript">
$(document).ready(function()
{

    var firstInput = $('#1');
    var seconInput = $('#2');

    var aa = $('#2');
    aa.change(function() {
    var n = firstInput.val().localeCompare(seconInput.val());

        if ( n === 0 ) {
            console.log('ok');
            $('#notif').attr('class', 'col-md-6');

        }
        else{
            console.log('ko');
            $('#notif').attr('class', 'has-error col-md-6');

        }
    });

});
</script>

任何建议的人？

Answer 1

简单的解决方案请使用此kpdecker/jsdiff

在线演示： demo