What are the best ways to emphasize text both inside and outside of tags?

Question

What are the best ways to emphasize text both inside and outside of tags?

I'm currently working on a WebApp that includes a feature for quick searching articles.

The structure of the feature can be described in two words:

Page
A global array (json, containing 100-150 items) with articles fetched through ajax. The fields include: id, title, snippet. Titles & snippets may contain simple style markup tags.

When a user types a query in the popup quick search field, the app does the following:

Searches within the global array
If matches are found, they are added to a temporary search results array (with cache)
Highlights the matches in the temp. results array and displays them to the user

It is important to note that the original array remains unmodified.

Currently, I am using basic String.indexOf method, but it cannot accurately match text within HTML-formatted text as shown below:

The question pertains to RegEx patterns. While it is not recommended to manipulate the DOM using RegEx and the expected results may not align semantically, it serves the purpose.

For instance:

<ul><li>Item <i><span style="color:red">Y</span></i></li></ul>

and we want to highlight the letter e, the expected result should be:

... It<em>e</em>m ...

. However, using a simple replace(/e/ig, '<em>$&</em>') will also target the letter 'e' within the style attribute.

In other words, what RegEx pattern can be used to avoid affecting words within HTML tags?

Another example: if we want to highlight Item Y, the desired output would be

<ul><li><em>Item <i><span style="color:red">Y</em></span></i></li></ul>

javascript regex tags string-matching replace

Answer 1

Answer №1

In order to search for specific text within a portion of a DOM tree, you can use the text contents of XML/HTML. While this example utilizes jQuery, the concept can be adapted for other libraries as well:

Example HTML:

<div id="article_contents">
Blah blah blah, Item 1, Item 2 blah blah <b>Ite</b>m <span>1</span> blah blah
</div>

JavaScript code:

var source = jQuery('#article_contents').text();
var queryRegexp = new RegExp ( 'Item 1', 'g' );
var results = source.match (queryRegexp);

The variable results now contains all instances of the searched string. To further enhance your search functionality by highlighting results, additional steps such as using RegExp.exec to identify match offsets would be necessary.

Answer 2

In order to search for specific text within a portion of a DOM tree, you can use the text contents of XML/HTML. While this example utilizes jQuery, the concept can be adapted for other libraries as well:

Example HTML:

<div id="article_contents">
Blah blah blah, Item 1, Item 2 blah blah <b>Ite</b>m <span>1</span> blah blah
</div>

JavaScript code:

var source = jQuery('#article_contents').text();
var queryRegexp = new RegExp ( 'Item 1', 'g' );
var results = source.match (queryRegexp);

The variable results now contains all instances of the searched string. To further enhance your search functionality by highlighting results, additional steps such as using RegExp.exec to identify match offsets would be necessary.

Answer 3

Answer №2

An unconventional trick is to scan for HTML tags between each letter of the search term. For instance, if your query is "find," the method would be:

(f)(<[.^>]*>)*(i)(<[.^>]*>)*(n)(<[.^>]*>)*(d)

However, in practice, additional steps are necessary because:

scripts
textareas
display:none, visibility:hidden, etc.

Answer 4

An unconventional trick is to scan for HTML tags between each letter of the search term. For instance, if your query is "find," the method would be:

(f)(<[.^>]*>)*(i)(<[.^>]*>)*(n)(<[.^>]*>)*(d)

However, in practice, additional steps are necessary because:

scripts
textareas
display:none, visibility:hidden, etc.

What are the best ways to emphasize text both inside and outside of tags?

Answer №1

Answer №2

Similar questions

What is the best way to extract values from a string that are already mapped

Problem with JQUERY Galleria CSS positioning alignment specifically in Firefox, Chrome works without issues

How to extract words from a dynamic router.pathname in NextJS when only the filename is displayed instead of the full path?

Executing multiple commands using Node.js TCP communication

Manage the angularJS user interface switch through an external event

Unexpected server failure due to a new error occurring in the asynchronous authentication login function

Tips on pausing a moving image from left to right and restarting it later

"Customizable rectangular container with jagged edges created with Scalable Vector Graphics

Save the value of an AngularJS expression to the clipboard upon clicking

Activate the submission button on AngularJS once a correctly formatted email is provided

Troubleshooting Multer to fix image payload issues in a Node.js and React.js application

Using Preg Match and Preg Replace for targeted formatting adjustments

When attempting to render mathML in a canvas on Safari, the image load callback does not properly trigger, resulting in

The output of the Javascript expression `["Java", "Python","Javascript"][Symbol.iterator]().next().value` is the initial element of the assigned array

Storing checkbox values in a MySQL database using PHP

Extracting information from JSON structure

Utilize jQuery/AJAX to extract a specific value from JSON data and transform it into a different value within the same

405 error: NGINX blocking POST method in Django DRF Vue.js application

An invalid argument error occurred in line 4618 of jQuery version 1.4.2, with a value of NaNpx specifically

"Exploring the functionalities of Expressjs's bodyParser and connect-form