Can you explain how Google highlights the specific search term within the description?

Question

Can you explain how Google highlights the specific search term within the description?

The functionality of my search engine is quite similar to how Google search works. When you search for a word, it gets highlighted in the returned results.

https://i.sstatic.net/Y1vc0.png

In my search engine, the searched word is enclosed in a span like this:

<span class="searchResults-term">Lorem</span>

The input field for entering search queries is very basic:

<input type="text">

The search result descriptions are displayed within this div:

<div class="searchResults-result"> 
   <h3 class="searchResults-title">Lorem Ipsum 
   </h3> 
</div>

I am trying to figure out how to highlight the searched word (e.g., Lorem or Ipsum) in the description based on what the user has typed in the input field. It should not be case-sensitive.

I have been struggling with this issue for hours and have spent an entire day researching solutions. Any help would be greatly appreciated. Thank you!

I have started writing jQuery code for this purpose, but I suspect that my setup may not be correct.

var oldSRTerm = $(".span.searchResults-term").val();

newSRTerm = '<span class="add-pink-bg">' + $(".span.searchResults-term").val() + '</span>',

newSRDesc = $('.searchResults-description').val().replace(RegExp(oldSRTerm,"gi"),newSRTerm);

$('.searchResults-description').html(newSRDesc);

jquery html css

Answer 1

Answer №1

Unfortunately, I don't have the ability to provide comments, and my expertise with JQuery is limited. However, I hope my response proves to be somewhat useful:

To remove case sensitivity, you can utilize the toLowerCase() method.

Implement a condition that checks whether the user's input.toLowerCase() is equal to matchingInput.toLowerCase().

You can make the text bold by adjusting the font style. For example:

$matchingInput.css("font-weight","Bold")

Answer 2

Unfortunately, I don't have the ability to provide comments, and my expertise with JQuery is limited. However, I hope my response proves to be somewhat useful:

To remove case sensitivity, you can utilize the toLowerCase() method.

Implement a condition that checks whether the user's input.toLowerCase() is equal to matchingInput.toLowerCase().

You can make the text bold by adjusting the font style. For example:

$matchingInput.css("font-weight","Bold")

Answer 3

Answer №2

Update:

In my observation, it seems that you are attempting to substitute the .val() of your descriptions. This may not be the correct approach as .val() is typically used for input, 'select`, and other form elements only. Instead, what you should do is extract the "text" of your description first, then proceed with the replacement.

var content = $description.html().trim();

or

var content = $description.text().trim();

Note: The last time I utilized .text(), it was not widely supported, but this information may be outdated.

Other notes:

You can actually incorporate the wrapper within .replace method using RegExp to retrieve the value. This can be achieved by enclosing the search term in parentheses ():

var regex = new RegExp("(" + searchTerm + ")");

content = content.replace(RegExp(regex, 'gi'), '<span class="searchResults-description-highlight">$1</span>');

You can view a working example here: https://jsfiddle.net/tx4nysmk/3/

Answer 4

Update:

In my observation, it seems that you are attempting to substitute the .val() of your descriptions. This may not be the correct approach as .val() is typically used for input, 'select`, and other form elements only. Instead, what you should do is extract the "text" of your description first, then proceed with the replacement.

var content = $description.html().trim();

or

var content = $description.text().trim();

Note: The last time I utilized .text(), it was not widely supported, but this information may be outdated.

Other notes:

You can actually incorporate the wrapper within .replace method using RegExp to retrieve the value. This can be achieved by enclosing the search term in parentheses ():

var regex = new RegExp("(" + searchTerm + ")");

content = content.replace(RegExp(regex, 'gi'), '<span class="searchResults-description-highlight">$1</span>');

You can view a working example here: https://jsfiddle.net/tx4nysmk/3/

Can you explain how Google highlights the specific search term within the description?

Answer №1

Answer №2

Update:

Other notes:

Similar questions

Leveraging multer for handling a FormData object in a node.js server

Can someone provide guidance on creating a JavaScript function that locates an image within an <li> element and sets that image as the background-image property in the li's CSS?

Show the Table and Conceal the Overflow

The attempt to unserializing the configuration schema in Yii2 was unsuccessful

The functionality of the WordPress Contact Form 7 Plugin becomes erratic when integrated into dynamically loaded AJAX content

Establishing consistent margin and padding for WYSIWYG (What You See Is What You

Using jQuery to replace the content of a div with a delay?

What Could Be Causing the Issue with My Submit Button's addEventListener Function?

What is the method for closing an <iframe> element directly?

What are some ways to implement querySelectorAll in conjunction with htmx?

Image positioned at the top with text links situated at the bottom thanks to Flexbox

Warning: Attempting to modify a property that is not defined - 'action'

In Firefox 50.0, the button's resizing feature causes the parent div container outline to adjust size

Steps to keep the gridlines in the chart from moving

How can I manage the pageWidth property in the layout of my xPage Bootstrap app?

Transforming JavaScript information into PHP with ajax for WordPress plugin creation

The HTML code as content

Concealing the footer on a webpage embedded within an iframe

Fetching external HTML content and subsequently running a script

Calculating the product of two input fields and storing the result in a third input field using a for loop