Highlight Any Strings Using Regex - jquery.highlight.js

Just another text highlighting jQuery plugin that enables you to highlight any strings within a specific container element using Regular expressions.

How to use it:

1. Download and place the main JavaScript file jquery.highlight.js after jQuery.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="./jquery.highlight.js"></script>

2. Highlight numbers using Regex.

<table border="0" class="table table-bordered">
  <thead>
      <tr>
          <th>Month</th>
          <th>Dates</th>
          <th>Number</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>January</td>
          <td>1st</td>
          <td>1001</td>
      </tr>
      <tr>
          <td>February</td>
          <td>1st,12th</td>
          <td>2011</td>
      </tr>
      <tr>
          <td>March</td>
          <td>3rd,22th</td>
          <td>3301</td>
      </tr>
  </tbody>
</table>

$("table").highlight();
$("table").trigger("search.highlight", /[0-9]+/g);

3. Highlight characters in the HTML table.

$("table").highlight();
$("table").trigger("search.highlight", "Jan");

4. The plugin automatically add the highlihgted strings around span tags with the class of .hightlight. So that you can style the highlihgted strings in the CSS.

.highlight { 
  background:#ff0; 
  font-weight: bold;
}

5. Clear the highlight effect.

$("table").trigger("clear.highlight");

Changelog:

2019-04-08

• JS updated

---

This awesome jQuery plugin is developed by page7. For more Advanced Usages, please check the demo page or visit the official website.