Ik heb ergens op de website een specifieke tekst, laten we zeggen “lollypops”, en ik wil alle voorkomens van deze string vervangen door “marshmellows”. Het probleem is dat ik niet precies weet waar de tekst is. Ik weet dat ik zoiets zou kunnen doen:
$(body).html($(body).html().replace('lollypops', 'marshmellows'));
Dit zou waarschijnlijk werken, maar ik moet zo min mogelijk HTML herschrijven, dus ik denk zoiets als:
- zoek de tekenreeks
- vind het dichtstbijzijnde bovenliggende element
- alleen het dichtstbijzijnde bovenliggende element herschrijven
- vervang dit zelfs in attributen, maar niet allemaal, bijvoorbeeld vervang het in
class, maar niet insrc
Ik zou bijvoorbeeld zo’n structuur hebben
<body>
<div>
<div>
<p>
<h1>
<a>lollypops</a>
</h1>
</p>
<span>lollypops</span>
</div>
</div>
<p>
<span class="lollypops">Hello, World!</span>
<img src="/lollypops.jpg" alt="Cool image" />
</p>
<body>
In dit voorbeeld zou elk voorkomen van “lollypops” worden vervangen, alleen <img src="...zou hetzelfde blijven en de enige elementen die daadwerkelijk zouden worden gemanipuleerd zouden zijn <a>en beide <span>s.
Weet iemand hoe dit moet?
Antwoord 1, autoriteit 100%
Je zou zoiets als dit kunnen doen:
$("span, p").each(function() {
var text = $(this).text();
text = text.replace("lollypops", "marshmellows");
$(this).text(text);
});
Het is beter om alle tags met tekst die moet worden onderzocht, te markeren met een geschikte klassenaam.
Dit kan ook prestatieproblemen hebben. jQuery of javascript zijn over het algemeen niet echt geschikt voor dit soort bewerkingen. Je kunt het beter server-side doen.
Antwoord 2, autoriteit 9%
Je zou iets op deze manier kunnen doen:
$(document.body).find('*').each(function() {
if($(this).hasClass('lollypops')){ //class replacing..many ways to do this :)
$(this).removeClass('lollypops');
$(this).addClass('marshmellows');
}
var tmp = $(this).children().remove(); //removing and saving children to a tmp obj
var text = $(this).text(); //getting just current node text
text = text.replace(/lollypops/g, "marshmellows"); //replacing every lollypops occurence with marshmellows
$(this).text(text); //setting text
$(this).append(tmp); //re-append 'foundlings'
});
voorbeeld: http://jsfiddle.net/steweb/MhQZD/
Antwoord 3, autoriteit 5%
Hieronder staat de code die ik heb gebruikt om tekst te vervangen door gekleurde tekst. Het is eenvoudig, neem de tekst en vervang deze in een HTML-tag. Het werkt voor elk woord in die klasse-tags.
$('.hightlight').each(function(){
//highlight_words('going', this);
var high = 'going';
high = high.replace(/\W/g, '');
var str = high.split(" ");
var text = $(this).text();
text = text.replace(str, "<span style='color: blue'>"+str+"</span>");
$(this).html(text);
});
Antwoord 4, autoriteit 2%
var string ='my string'
var new_string = string.replace('string','new string');
alert(string);
alert(new_string);
Antwoord 5, autoriteit 2%
Je zou zoiets als dit kunnen doen:
HTML
<div class="element">
<span>Hi, I am Murtaza</span>
</div>
jQuery
$(".element span").text(function(index, text) {
return text.replace('am', 'am not');
});
Antwoord 6
Waarom voegt u gewoon geen klasse toe aan de tekenreekscontainer en vervangt u vervolgens de binnentekst? Net zoals in dit voorbeeld.
HTML:
<div>
<div>
<p>
<h1>
<a class="swapText">lollipops</a>
</h1>
</p>
<span class="swapText">lollipops</span>
</div>
</div>
<p>
<span class="lollipops">Hello, World!</span>
<img src="/lollipops.jpg" alt="Cool image" />
</p>
jQuery:
$(document).ready(function() {
$('.swapText').text("marshmallows");
});