SO - 18951861

by Arun P Johny

HTML

<a href="">small</a>
<a href="">medium</a>
<a href="">large</a>

<div class="size" data-size="small">small tee</div>
<div class="size" data-size="small medium">small medium tee</div>
<div class="size" data-size="small medium">small medium tee</div>
<div class="size" data-size="small">small tee</div>
<div class="size" data-size="medium large">medium large tee</div>
<div class="size" data-size="medium large">medium large tee</div>

JavaScript

$("a").click(function (e) {
    var selectSize = $(this).text();
    filter(selectSize)
    e.preventDefault();
});

function filter(e) {
    var regex = new RegExp('\\b' + e + '\\b');
        console.log('test', regex)
    $('.size').hide().filter(function () {
        console.log($(this).data('size'), regex.test($(this).data('size')))
        return regex.test($(this).data('size'))
    }).show();
}