Underline Two Word In A Sentence With Jquery

It's my code but Only one word is underlined

Solution 1:

Your second $(this).text() has stripped the first span from the content

It is also NOT a good idea to change the HTML twice. If the first word is span or word or decoration then the first span will be corrupted by the second change.

Safest solution is to replace all text before setting the HTML.

$(document).ready(function() {
  let firstword = 'web';
  let secondword = 'js';

  $(".field.ConditionsAccept>.caption:contains('" + secondword + "'):contains('" + firstword + "')").each(function() {
    const regex  = newRegExp("(" + secondword + ")", 'g');
    const regex2 = newRegExp("(" + firstword +  ")", 'g');
    let text = $(this).text()
    console.log(text)
    text = text
      .replace(regex,  '<span class="word"  style="text-decoration: underline">$1</span>')
      .replace(regex2, '<span class="word2" style="text-decoration: underline">$1</span>');
    $(this).html(text)
      
  });
});

.ConditionsAccept { width: 500px; }

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><tableclass="field ConditionsAccept"><captionclass="caption">Here is some web and js stuff</caption></table>

Solution 2:

The problem is that the function text() is being used to get the contents of the element. This gets the text, but the HTML is stripped. Therefore for the first use it does the replace of the word js OK but then the second use gets rid of the span element and so you are left with just the second use replacing the word (which is firstword in that regex) only.

This snippet uses the html() function instead of text() to make sure the span remains.

<divclass="field ConditionsAccept"><divclass="caption">text0 js text web text1 js text3</div></div><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script>
  $(document).ready(function() {
    let firstword = 'web';
    let secondword = 'js';
    $(".field.ConditionsAccept>.caption:contains('" + secondword + "'):contains('" + firstword + "')").each(function() {
      var regex = newRegExp("(" + secondword + ")", 'g');
      var regex2 = newRegExp("(" + firstword + ")", 'g');
      $(this).html($(this).html().replace(regex, '<span class="word" style="text-decoration: underline">$1</span>'));
      $(this).html($(this).html().replace(regex2, '<span class="word2" style="text-decoration: underline">$1</span>'));
    });
  });
</script>

Solution 3:

I made a sample using your code and meet the sample issue as you said. How I solved it is to change code as below:

            $(this).html($(this).html().replace(regex, '<span class="word" style="text-decoration: underline">$1</span>'));
            $(this).html($(this).html().replace(regex2, '<span class="word2" style="text-decoration: underline">$1</span>'));

It works for me. You can have a try.