How can highlight some words in a large text when displaying the result in a table?

user_13249652 0
Viewed 63

I read a lot of questions here, but did not find an answer, but only got confused more. I have some simple code that implements a search, and output the result from a database to a table. Word search results in large text where these words appear, and my attempts at styling fail because the style is applied to the entire text at once, rather than to individual search words. How can highlight some words in a large text when displaying the result?


<input type="text" name="search_box" id="search_box" class="form-control" placeholder="Search" />
<div class="table-responsive" id="dynamic_content"></div>

<script>
$(document).on('click', '.page-link', function(){
      var query = $('#search_box').val();
      load_data(page, query);

    });

    $('#search_box').keyup(function(){
      var query = $('#search_box').val();
      load_data(1, query);
    });
</script>

$query = "
  SELECT * FROM journal
  ";

  if($_POST['query'] != ''){
  
    $query .= 'WHERE content LIKE "%'.str_replace(' ', '%', $_POST['query']).'%" ';
  }

$query .= 'ORDER BY id DESC ';

$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();

if($total_data > 0)
  {
    foreach($result as $row)
    {
     $output .= '
      <table>
      <tr>
        <td><div class="decoration_date">'.$row["user_date"]. '</div>'.$row["content"].'</td>
      </tr>
      ';
    }
  }
  else
  {
    $output .= '
    <tr>
      <td colspan="2">Nothing found</td>
    </tr>
    </table>
    ';
  }

UPDATE

Ok, I did preg_replace(), and some simple steps, but I still don't understand how to take a $row["content"] from an array, modify it and insert it back into the table.

$wordToFind  = $_POST['query']; 
$wrap_before = '<span class="highlight">'; 
$wrap_after  = '</span>';  preg_replace("/($wordToFind)/i", "$wrap_before$1$wrap_after", ???);
html php
2 Answers

span is the HTML tag which can help you here.

Since you are generating the output post the query is complete, you can wrap the text which was searched in a span, and assign it a simple CSS class to highlight the text.

For example: Say, I searched for Javascript, I will generate the output as follows:

HTML:

<span class='highlight'>Javascript<span>

CSS:

   .highlight {
     background-color: yellow
    }

JSFiddle link: https://jsfiddle.net/7p6nL4ta/

user_68200560

I solved my problem, maybe not in the prettiest way, but it works. Your comments on improvement will be helpful, thanks.

$wordToFind  = $_POST['query'];
$wrap_before = '<span class="higlight">'; //
$wrap_after  = '</span>';
    
if($total_data > 0){
   foreach($result as $row)
          
     if ($_POST['query'] != '') {
      $output .= '
          <tr>
            <td><div class="decoration_date">'.$row["user_date"]. '</div>'.$row["content"] = preg_replace("/($wordToFind)/", "$wrap_before$1$wrap_after",$row["content"]) .'</td>
          </tr>';
          
          }else{
          $output .= '
          <tr>
            <td><div class="decoration_date">'.$row["user_date"]. '</div>'.$row["content"] .'</td>
          </tr>';
          }
      }
      else
      {
        $output .= '
        <tr>
          <td colspan="2">Nothing found</td>
        </tr>
        ';
      }
user_132496520
Related