JS: bestimmtes Wort in String einfärben (Klasse vergeben)

[zome]

Moin alle zusammen,

es geht um folgendes: man hat einen String, z.B.:
"das ist aber" - dieser ist in einem HTML tag, z.B. einer Überschrift, also:
<h1>das ist aber</h1>

Nun möchte ich das 3.Wort - also nicht ein bestimmtes Wort,
sondern allgemein immer das 3.Wort einfärben mittels Klasse, das Ergebnis wäre dann, z.B.:
<h1>das ist <span class="bunt">aber</span></h1>

Ich dachte daran, mittels White-Space, also vom ersten bis zum zweiten, den String auszulesen, zu löschen und mittels "appendTo" wieder mit der Klasse zu integrieren.

Hat jemand einen anderen Lösungsansatz - freue mich über jede Hilfe, danke

 

[Duddle]

AW: JS: bestimmtes Wort in String einfärben (Klasse vergeben)

innerHTML vom h1 auslesen, split(), drittes Element erweitern (manuell oder per wrap()), join(), innerHTML vom h1 ersetzen.


Duddle

 

[zome]

AW: JS: bestimmtes Wort in String einfärben (Klasse vergeben)

Hey Duddle,

vielen Dank für die richtige Richtung, ich habe nun Folgendes:

<h1 class="topic">Mehr als Blau</h1>

<script type="text/javascript">

var string = $(".topic").html();
var string_spl = string.split(" ",3);
var string_arr = [string_spl[0], string_spl[1], "<span class='blue'>", string_spl[2], "</span>"];
var string_complete = string_arr.join(" ");
$(".topic").html(string_complete);

</script>

Funktioniert - mit wrap() hab ich`s leider nicht hinbekommen.
Da es auf der Website wohl mehrere <h1> sein werden, habe ich mich der each() Funktion bedient:

<h1 class="topic">Mehr als Blau</h1>
<h1 class="topic">Neues ist toll</h1>
<h1 class="topic">Altes aber auch</h1>

<script type="text/javascript">

$(".topic").each(function()
{
        var string = $(this).html();
        var string_spl = string.split(" ",3);
        var string_arr = [string_spl[0], string_spl[1], "<span class='blue'>", string_spl[2], "</span>"];
        var string_complete = string_arr.join(" ");
        $(this).html(string_complete);
});


</script>

Funktioniert auch - ich mag Jquery
Vielen Dank Duddle!

Eventuell Verbesserungsvorschläge?

 

[Duddle]

AW: JS: bestimmtes Wort in String einfärben (Klasse vergeben)

Es gibt sicher auch h1 mit mehr als 3 Wörtern, dann schlägt dein Ansatz string_arr fehl. Ich hätte es so geschrieben:

$(".topic").each(function() {
    var string = $(this).html();
    var string_spl = string.split(" ");
    string_spl[2] = "<span class='blue'>"+string_spl[2]+"</span>";
    var string_complete = string_spl.join(" ");
    $(this).html(string_complete);
});

Oder noch kürzer so:

$(".topic").each(function() {
    var string_spl = $(this).html().split(" ");
    string_spl[2] = "<span class='blue'>"+string_spl[2]+"</span>";
    $(this).html(string_spl.join(" "));
});

Da ist für mich gleich ersichtlich, was passiert: Der Text wird gesplittet, das dritte Element erweitert, der Text wird zusammengeführt und ersetzt den alten Text. So (ohne das string_arr) kannst du auch problemlos die Stelle rausziehen, also statt der 2 einen Parameter einführen... gleiches gilt natürlich auch für den Trenner-String (Parameter statt " ").


Duddle

 

[zome]

AW: JS: bestimmtes Wort in String einfärben (Klasse vergeben)

Ja, das ist natürlich eine klasse Idee, von wegen Parametern - ich denke da oft zu "unvariabel" - schäm:uhm:;
Und auch sehr schön die kurze Variante - Respekt.

danke Duddle für die Tipps!