javascript - 突出显示/应用样式来过滤元素中的字符串

Question

我正在编写以下代码。如何突出显示元素中选定的过滤器？

我已经尝试过了

$(this).html(function(_, html)
{
    return html.replace(new RegExp(filter, 'gi'), '<span style="font-weight:bold">$&</span>');
});

但看起来我做得不对!

$(document).ready(function(){
    $("#filter").keyup(function(){
        var filter = $(this).val(), count = 0;

        $("nav ul li").each(function(){
            if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                $(this).fadeOut();

                $(this).html(function(_, html) {
                    return html.replace(new RegExp(filter, 'gi'), '<span style="font-weight:bold">$&</span>');
                });
            } else {
                $(this).show();
                count++;
            }
        });

        var numberItems = count;
        $("#filter-count").text("Number of Comments = "+count);
    });
});

body{
  padding:50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="live-search" action="" class="styled" method="post">
    <fieldset>
        <input type="text" class="text-input" id="filter" value="" />
        <span id="filter-count"></span>
    </fieldset>
</form>

<nav>
    <ul>
        <li><a href="#">Jim James</a></li>
        <li><a href="#">Hello Bye</a></li>
        <li><a href="#">Wassup Food</a></li>
        <li><a href="#">Contact Us</a></li>
        <li><a href="#">Bleep bloop</a></li>
        <li><a href="#">jQuery HTML</a></li>
        <li><a href="#">CSS HTML AJAX</a></li>
        <li><a href="#">HTML5 Net Set</a></li>
        <li><a href="#">Node Easy</a></li>
        <li><a href="#">Listing Bloop</a></li>
        <li><a href="#">Contact HTML5</a></li>
        <li><a href="#">CSS3 Ajax</a></li>
        <li><a href="#">ET</a></li>
    </ul>
</nav>

Answer 1

我建议添加一个类而不是内联样式，例如:

.charBold {
  font-weight: bold;
  color: red;
}

将正则表达式移至 if 的 else 部分，在应用正则表达式之前，您需要删除之前的范围(如果有):

$("#filter").keyup(function () {
    var filter = $(this).val(), count = 0;

    $("nav ul li a").each(function () {
        if ($(this).text().search(new RegExp(filter, "i")) < 0) {
            $(this).parent().fadeOut();
        } else {
            $(this).html(function (_, html) {
                var retVal = $(this).text(); // remove any span...
                return (filter.trim().length == 0) ? retVal :  retVal.replace(new RegExp(filter, 'gi'), '<span class="charBold">' + filter + '</span>');
            });
            $(this).parent().show();
            count++;
        }
    });

    var numberItems = count;
    $("#filter-count").text("Number of Comments = " + count);
});

body {
    padding: 50px;
}

.charBold {
    font-weight: bold;
    color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="live-search" action="" class="styled" method="post">
    <fieldset>
        <input type="text" class="text-input" id="filter" value=""/>
        <span id="filter-count"></span>
    </fieldset>
</form>

<nav>
    <ul>
        <li><a href="#">Jim James</a></li>
        <li><a href="#">Hello Bye</a></li>
        <li><a href="#">Wassup Food</a></li>
        <li><a href="#">Contact Us</a></li>
        <li><a href="#">Bleep bloop</a></li>
        <li><a href="#">jQuery HTML</a></li>
        <li><a href="#">CSS HTML AJAX</a></li>
        <li><a href="#">HTML5 Net Set</a></li>
        <li><a href="#">Node Easy</a></li>
        <li><a href="#">Listing Bloop</a></li>
        <li><a href="#">Contact HTML5</a></li>
        <li><a href="#">CSS3 Ajax</a></li>
        <li><a href="#">ET</a></li>
    </ul>
</nav>