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  = new RegExp("(" + secondword + ")", 'g');
    const regex2 = new RegExp("(" + 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; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="field ConditionsAccept">
  <caption class="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.

<div class="field ConditionsAccept">
  <div class="caption">text0 js text web text1 js text3</div>
</div>
<script src="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 = new RegExp("(" + secondword + ")", 'g');
      var regex2 = new RegExp("(" + 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.