JSFiddle - React, Tailwind, and code Playground

by Bernat Comerma

HTML

<h4>Type "line" or "third"</h4>
<input type="text" id="txt2find" />
<ul id="ul_list">
  <li class="js_li_item">
    <input type="radio" name="rb" id="rb1" value="1"/>
    <label for="rb1"><span class="js_label">line first</span>
  </li>
  <li class="js_li_item">
    <input type="radio" name="rb" id="rb2" value="2"/>
    <label for="rb2"><span class="js_label">Line second</span>
  </li>
  <li class="js_li_item">
    <input type="radio" name="rb" id="rb3" value="1"/>
    <label for="rb3"><span class="js_label">Third line</span>
  </li>
</ul>

CSS

ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}

JavaScript

// Initializations ---------------------------
var escapeRegex = function (value) {
        return value.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&")
             .replace(/[aàáäãâ]/g, "[a\xE0\xE1\xE2\xE3\xE4]")
             .replace(/[eèéëê]/g, "[e\xE8\xE9\xEA\xEB]")
             .replace(/[iìíïî]/g, "[i\xEC\xED\xEE\xEF]")
             .replace(/[oòóöõô]/g, "[o\xF2\xF3\xF4\xF5\xF6]")
             .replace(/[uùúüû]/g, "[u\xF9\xFA\xFB\xFC]")
             .replace(/[cç]/g, "[c\xE7]")
             .replace(/[ñ]/g, "[n\xF1]");
    };

// Event bindings ----------------------------

$('#txt2find').on('keyup', function (e) { KeyUpOn_txt2Find(e) });

function KeyUpOn_txt2Find(e) {
   var _val = $(e.target).val();
   filterByText(_val);
}

// Business rules ----------------------------

// Shows all rows
function showAllRbList () {
  var _$label, _val;
  $('#ul_list').find('.js_li_item').each(function () {
       _$label = $(this).find('.js_label');
       _val = _$label.text();
       _$label.html(_val).closest('.js_li_item').show();
  });
};

function filterByText (pVal) {
  var _re = new RegExp(pVal, "i"), termSplited = pVal.match(/\w+/g), 
      _$el = '', _label;
  showAllRbList();
  $('.js_label').each(function () {
    _$el = $(this);
    if (!_$el.text().search(_re)) {
      _label = _$el.text();
      for (var i = 0; termSplited && i < termSplited.length; i++) {
         _label = _label.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" 
                + escapeRegex(termSplited[i]) 
                + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>");
      }
      _$el.html(_label).closest('.js_li_item').show();
    }
    else _$el.closest('.js_li_item').hide();
  });
};