What is the best way to emphasize case-insensitive searchtext matches in JavaScript?

Question

What is the best way to emphasize case-insensitive searchtext matches in JavaScript?

If I have data containing words like Krishna, krishna, KRISHNA and I enter the search text as 'krish', it will retrieve all three words. However, when I want to highlight the matching result, only the exact matching part of the string is highlighted. How can I highlight all matching strings in the given data without considering case sensitivity?

Below is the sample code I implemented:

var searchTxt='KRISH';

var actualTxt='Krish';

if(actualTxt.toLowerCase().indexOf(searchTxt.toLowerCase()){
actualTxt = actualTxt.replaceAll(searchTxt,"<span style='font-weight: bold;background-color: yellow;'>"+searchTxt+"</span>");
}

Please help me with this issue. Thank you in advance.

javascript search text highlight

Answer 1

Answer №1

Here is a code snippet for you to try:

HTML:

<input type="text"/>
<button>search</button>
<ul>
 <li>Krish</li>
 <li>Krish</li>
 <li>Krish</li>
 <li>LastOne</li>
</ul>

JavaScript:

var li = $('ul li'),
input = $('input');

$('button').on('click', function(){
 var search = input.val(), regex;
 li.removeClass('highlight');
 if(search){
   regex = new RegExp(search, 'i')  
   li.filter(function(){ 
    return $(this).text().match(regex);
   }).addClass('highlight'); 
  }
 });

See DEMO

Answer 2

Here is a code snippet for you to try:

HTML:

<input type="text"/>
<button>search</button>
<ul>
 <li>Krish</li>
 <li>Krish</li>
 <li>Krish</li>
 <li>LastOne</li>
</ul>

JavaScript:

var li = $('ul li'),
input = $('input');

$('button').on('click', function(){
 var search = input.val(), regex;
 li.removeClass('highlight');
 if(search){
   regex = new RegExp(search, 'i')  
   li.filter(function(){ 
    return $(this).text().match(regex);
   }).addClass('highlight'); 
  }
 });

See DEMO

What is the best way to emphasize case-insensitive searchtext matches in JavaScript?

Answer №1

Similar questions

AngularJS nested menu functionality not functioning properly

The issue of WithRouter Replace Component not functioning in React-Router-V6 has been encountered

Searching and replacing numbers within text using wildcard in PHP string manipulation

Issue with Express.js res.append function: Headers cannot be set after they have already been sent

Is there a better way to implement an inArray function in JavaScript than using join and match?

Create a placeholder for the module function

Tips for effectively incorporating customized validation into an array using vuelidate

Exploring nested routes with HashRouter in React

How can you prevent the 'Script not responding' error when using Reverse AJAX / Comet?

Tips for showcasing retrieved JSON with jQuery's ajax functionality

Consecutive pair of JavaScript date picker functions

Is it more efficient to use Vue events or Vuex for transmitting data between components?

I am unable to pass a variable through a callback, and I cannot assign a promise to a

The button similar to Facebook does not function properly when using fancybox

What is the best way to send form data to MongoDB using React?

Is there a way to instantly remove script from the document head using jQuery instead of waiting a few seconds?

Ensure the browser back button navigates to the login page seamlessly, without displaying any error

Fixing a binary search algorithm for an array of strings in C: a step-by-step

Avoid altering the Vuex store state directly without using mutation handlers in VueJS

Discrepancy in Timestamp Deviation for Older Dates Between Java and Javascript (1 Hour)