How do I open only collapsed items that contain highlighted word?

Question

0.00/5 (No votes)

See more:

Hello developers,

In my code I have a function that matches words and highlights them with a yellow background and in the same time opens all the sections that contain the words and those who don't contain them.

I would like to open only the sections that contain the highlighted words and nothing else.

If the code tried below isn't enough, please check here for a functional example: Find words in collapsed items - JSFiddle - Code Playground

What I have tried:

function highlightWord() {
            // create a regex from our term
            const word = document.getElementById("searchedWord").value;
            const r = new RegExp("(" + word + ")", "ig");
            $(".reports-list-item__title--compendium").each(function (i) {
                if ($(this).text().match(r)) {
                    // get all the matches
                    var matches = $(this).text().match(r);
                    // loop through them
                    $.each(matches, function () {
                        // push the index of this section onto the array
                        occurrences.push(i);
                    });
                    // wrap each found search term with our `found` span to highlight it
                    $(this).html($(this).text().replace(r, "<mark>$1</mark>"));
                }
// // open the sections that contain the highlighted words 
                $(".timeline-compendium__content").collapse("show");
                $(".timeline-type .timeline-type__content").collapse("show");
            });
        }

Posted 13-Jul-21 0:00am

User 15221028

Updated 13-Jul-21 0:25am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Chris Copeland · Accepted Answer · 2021-07-13T00:25:00

You can use the closest()[^] method which traverses up the DOM to find the first matching parent with a provided selector. You're already matching whether an element text contains the search term you could simply change:

JavaScript

// wrap each found search term with our `found` span to highlight it
                    $(this).html($(this).text().replace(r, "<mark>$1</mark>"));
                }
// // open the sections that contain the highlighted words 
                $(".timeline-compendium__content").collapse("show");

With:

JavaScript

// wrap each found search term with our `found` span to highlight it
                    $(this).html($(this).text().replace(r, "<mark>$1</mark>"));
                    $(this).closest('.timeline-compendium__content').collapse('show');
                }

For any elements which match the search term, this should navigate up the DOM to the containing section and expand it.