Es mi código pero solo una palabra está subrayada
$(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).text().replace(regex, '<span class="word" style="text-decoration: underline">$1</span>')); $(this).html($(this).text().replace(regex2, '<span class="word2" style="text-decoration: underline">$1</span>')); }); }); .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>Su segundo $(this).text() ha eliminado el primer tramo del contenido
Tampoco es una buena idea cambiar el HTML dos veces. Si la primera palabra es span word o decoration , el segundo cambio corromperá el primer tramo.
La solución más segura es reemplazar todo el texto antes de configurar el 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>El problema es que la función text() se usa para obtener el contenido del elemento. Esto obtiene el texto, pero se elimina el HTML. Por lo tanto, para el primer uso, reemplaza la palabra js OK, pero luego el segundo uso elimina el elemento span y, por lo tanto, solo queda el segundo uso reemplazando la palabra (que es la primera palabra en esa expresión regular).
Este fragmento usa la función html() en lugar de text() para asegurarse de que se mantenga el intervalo.
<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>Hice una muestra usando su código y resolví el problema de la muestra como dijo. Cómo lo resolví es cambiar el código de la siguiente manera:
$(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>'));Esto funciona para mi. Puedes intentarlo.