asked on

RegExp issue, dealing with spaces, hyphens and case insensitive

I have an issue with JavaScripts RegExp. What I'm trying to achieve is to find and replace HTML, wraping text with a span tag to create 'tooltips'. The problem is managing phrases like 'Solar cells' e.g words with 'spaces', words with hyphens, matching whole words as in 'Solar cells' or 'non-renewable' both being 2 words but I need them to found as one phrase and being 'case insensitive'.

I have an oject with the words that need finding and a loop. That code below should show what I'm trying to achieve.

<script>
   $(document).ready(function(){

   tooltips = {'non-renewable':"non-renewable content", 'renewable':"renewable conent", 'Solar cells':'solar cells conent', 'solar':'solar content'};

   $.each(tooltips, function(index, value) {
      $(".tt-w:contains(" + index + ")").html(function (_, html) {
         var regex = new RegExp("\\b" + index + "\\b", 'gi');

         return html.replace(regex, "<span style='background:yellow' data-tooltip='"+index+"'>$&</span>");
       });
   });

})
</script>

<div class="tt-w">
   Natural gas is colourless and odourless. It is a fossil fuel and releases energy when burnt. non-renewable Solar cells
</div>

Open in new window

The results of the above are as follows:

<span style="background:yellow" data-tooltip="non-<span style='background:yellow' data-tooltip='renewable'>renewable</span>">non-<span style="background:yellow" data-tooltip="renewable">renewable</span></span>

Open in new window

Many helps will be greatly appricaited.

Thanks

Clive

Terry Woods

Try this pattern to avoid re-matching keywords that have already been matched:

         var regex = new RegExp("\\b" + index + "\\b(?!(?:(?!<span).)*</span)", 'gi');

Open in new window

It avoids matching key words that are contained with span tags.I think that were the key-words that are contained within other key-words (eg "renewable" within "non-renewable"), the sub-key-word should be later in the list to ensure it's not matched first.

ASKER CERTIFIED SOLUTION

Michel Plungjan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Clive Major

ASKER

Hi Terry & Michel

Many thanks for you replies.

Terry this nearly works however it's not case insensitive e.g. if you search for 'solar cells' it does not replace 'Solar cells'.

Michel, also nearly working however the text that gets wrapped needs to be as the orginal text e.g. if I change 'solar cells' to 'Solar cells' in hte 'tooltips object' the text changes on the frontend/page. This text needs to be as per the original e.g. if the original is 'Solar cells' it needs to stay they way.

Many thanks

Michel Plungjan

I fixed my answer. You had Solar cells in the array. I changed to solar cells and use the match in the text instead of the key