How to perform normal and regex search on huge text lines using jquery

I have huge log data content to be shown on the browser for which it's rendered with each line in a pre tag like the following for it to look clean.

<div id="log_block">
    <pre class="logs" id="line_1">00:00:00.001 INFO Current Directory C:/DATA</pre>
    <pre class="logs" id="line_2">00:00:00.001 INFO No image info file found</pre>
    <pre class="logs" id="line_3">00:00:00.001 INFO Command line: ls -l</pre>
    .
    .
    <pre class="logs" id="line_10000">00:20:10.001 INFO Command line</pre>
</div>

The application has a search box where users can make normal search for a phrase or regex search.

When any user searches for a text, I have used find function of the browser to show the searched word, wherein I'm hiding all the lines that do not contain that word.

function find_searched_word() {
    val = $('#search_bar').val();
    $('#log_block pre:not(:contains("' + val + '"))').hide();
}

For regex search, I'm looping through each line of pre to check if it matches and store in variable and then renders it.

html_content = '';
$("#log_block pre").each(function(i){
   if(this.html().match(regex))
      html_content = html_content + this;
});

For loglines up to 20,000+ lines the process is fast but when log lines cross 100,000+ lines then search becomes very slow and sometimes page stucks.

What is the best alternative to performing a phrase and regex search for 100,000+ text lines rendered on the browser?