Меняется регистр символов в фильтре текста

Question

Маленькая программа, которая фильтрует символы, проверяя option.

Она выделяет совпадения жёлтым цветом, но проблема в том, что после замены определённой части текста на тот же текст но со <span> теряется регистр символов.

Я пробовал перебирать строку, сравнивая её с исходной строкой, но всё не работает, подскажите правильный путь пожалуйста.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Untitled</title>
    <meta name="description" content="This is an example of a meta description.">
    <script src="https://code.jquery.com/jquery-1.10.2.min.js" integrity="sha256-C6CB9UYIS9UJeqinPHWTHVqh/E1uhG5Twh+Y5qFQmYg=" crossorigin="anonymous"></script>
</head>

<body>
    <style type="text/css">
    .list .input-wrapper {
        display: inline-block;
        position: relative;
    }

    .list .input-wrapper .remove {
        display: none;
        position: absolute;
        right: 5px;
        top: 2px;
        cursor: pointer;
        color: red;
    }

    .list .input-wrapper .remove.active {
        display: block;
    }

    .list .input-wrapper input {
        padding-right: 15px;
    }

    ul li.hidden {
        display: none;
    }

    .list_out {}

    .list_out ul li {
        cursor: pointer;
    }

    .active {
        display: block;
    }

    .selected {
        background: blue;
        color: #fff;
    }
    .hiliter {
        background: yellow;
    }
    </style>


    <div class="list">
        <div class="input-wrapper">
            <input class="serchBox" />
            <div class="remove">X</div>
        </div>
        <br>
        <div class="list_out" data-id="1">
            <ul></ul>
        </div>
        <br>
        <!--  select должен быть скрытым<br> -->
        <select class="select_src" name="" onchange="" style="display: none;">
            <option value="1">В лесу родилась елочка</option>
            <option value="2">В лесу она росла</option>
            <option value="3">Зимой и летом стройная</option>
            <option value="4">Зеленая была</option>
            <option value="5">Метель ей пела песенку</option>
            <option value="6">Спи, елочка, бай-бай!</option>
        </select>
    </div>
    <script>
    $(window).ready(function() {
        $(".list input").focus(function() {
            let data = $(this).val();
            if (data.length == 0) {
                getAll();
            }
        });
        $(".list").on("mouseleave", function() {
            let data = $(".list input").val();
            if (data.length == 0) {
                getOff();
            }
        });
        $(".list input").on("input change", function() {
            let data = $(this).val();
            if (data.length > 0) {               
                $(".list_out").find('ul').html('');
                $.each($(".select_src").find('option'), function() {
                    if ($(this).text().toLowerCase().includes(data.toLowerCase())) {
                        temp = hiliter(data.toLowerCase(), $(this).text().toLowerCase());
                        $(".list_out").find('ul').append("<li>" + temp + "</li>");
                        $(".list_out ul li").on("mouseover", function() {
                            $(".serchBox").blur();
                        });
                        $(".list_out ul li").on("click", function() {
                            $(".list_out ul li").removeClass('selected');
                            $(this).addClass('selected');
                            let data_temp = $(this).text();
                            $(".select_src option").removeProp("selected");
                            $.each($(".select_src").find('option'), function() {
                                if ($(this).text().toLowerCase().includes(data_temp.toLowerCase())) {
                                    $(this).prop({
                                        selected: 'selected'
                                    });
                                }
                            })
                        });
                    }
                })
            } else {               
                getAll();
                $(".select_src option").removeProp("selected");
            }
        });

        function getAll() {
            $(".list_out").find('ul').html('');
            $.each($(".select_src").find('option'), function() {
                $(".list_out").find('ul').append("<li>" + $(this).text() + "</li>");
            })
            $(".list_out ul li").on("click", function() {
                $(".list_out ul li").removeClass('selected');
                $(this).addClass('selected');
                let data_temp = $(this).text();
                $(".select_src option").removeProp("selected");
                $.each($(".select_src").find('option'), function() {
                    if ($(this).text().toLowerCase().includes(data_temp.toLowerCase())) {
                        $(this).prop({
                            selected: 'selected'
                        });
                    }
                })
            });
        }

        function getOff() {
            $(".list_out").find('ul').html('');
            $(".serchBox").blur();
        }

        function hiliter(word, string) {
            var rgxp = new RegExp(word, 'g');
            var repl = '<span class="hiliter">' + word + '</span>';



            return string.replace(rgxp, repl);
        }
    })
    </script>
</body>

</html>

БЛОГ НА HUSL

Меняется регистр символов в фильтре текста

Ответы (0 шт):