Quiero ocultar los enlaces que contienen "NOSP" al hacer clic en el botón Sin spoiler, pero también quiero ocultar ese texto "NOSP" de forma predeterminada.
Usando jQuery esto es lo que he intentado hasta ahora:
$("button").click(function(){ $("a:contains('NOSP')").hide(); }); $("a:contains('NOSP')").each(function(){ $(this).text($(this).text().replace('NOSP','')) }); a { display: table; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <button>Hide spoilers</button> <a href="#">Full match</a> <a href="#">All goals NOSP</a> <a href="#">Highlights</a> <a href="#">Highlights</a> <a href="#">Highlights NOSP</a>(también un jsfiddle )
Puede preprocesar todo esto con $(document).ready y agregar un nombre de clase a cada enlace NOSP para hacer referencia a él más tarde y, al mismo tiempo, eliminar esa cadena del texto del enlace. Nota: en caso de que haya alguna palabra con NOSP, dividí el texto en una matriz y usé array.includes(targ) para encontrarlo.
$(document).ready(function() { $("a").each(function() { let t = $(this).text().split(" ") if (t.includes('*')) { t.splice(t.indexOf('*'), 1) $(this).addClass('nosp').text(t.join(" ")) } }) $("button").click(function() { $("a.nosp").hide(); }); }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button>Hide spoilers</button> <a href="#">Full match</a> <a href="#">All goals *</a> <a href="#">Highlights</a> <a href="#">Highlights</a> <a href="#">Highlights *</a>