Click here to Skip to main content
15,038,237 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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
Updated 13-Jul-21 0:25am

1 solution

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.
   
Comments
User 15221028 13-Jul-21 6:33am
   
Thank you so much for your suggestion regarding my issue, I really appreciate it!
Chris Copeland 13-Jul-21 6:45am
   
You're welcome :)

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




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900