'Bold search result does not distinguish between uppercase and lowercase letters

I'm making a search engine with Ajax which bolds live search results.

The problem is that writing with lowercase letters does not bold the same expression, which starts with a capital letter, e.g. by typing "lorem ipsum" shows two results "lorem ipsum" and "Lorem ipsum" but it only bolds the phrase, depending on whether I write it uppercase or lowercase

Ajax function

add_action('wp_ajax_data_fetch' , 'data_fetch');
add_action('wp_ajax_nopriv_data_fetch','data_fetch');
function data_fetch(){

  $the_query = new WP_Query( array( 'posts_per_page' => -1, 's' => esc_attr( $_POST['keyword'] ), 'post_type' => array('post') ) );
  if( $the_query->have_posts() ) :
      echo '<ul>';
      while( $the_query->have_posts() ): $the_query->the_post(); ?>
          <?php
          $pattern = '/('.$_POST["keyword"].')/';
          $title = preg_replace($pattern, "<b>$1</b>", get_the_title());
          ?>

          <li><a href="<?php echo esc_url( post_permalink() ); ?>"><?php echo $title;?></a></li>

      <?php endwhile;
     echo '</ul>';
      wp_reset_postdata();  
  endif;

  die();
}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source