Findet das erste Wort in HTML und ersetzen

Question

ich folgende Konstrukt haben:

<h1> 
    <span> 
    </span> 
</h1> 

.... und

<div id="tourname">Riding trip arround the volcano</div> 

Nun ist die div mit der ID von einer PHP-Funktion gefüllt ist, und ich würde wie das meine h1 wie folgt aussieht:

<h1> 
    <span>Riding</span> 
    trip arround the volcano 
</h1> 

ich es geschafft, die h1 usin zu füllen g Diese Funktion:

$("h1").html($("#tourname").html()); 

aber ich habe keine Ahnung, wie mein String in zwei Teile aufzuspalten und Können Sie einen Tipp geben, hinter dem/span

einen Teil in diese Spanne und den Rest füllen?

Vielen Dank

Answer 1

Sie können auf 2 Arten tun. 1 - Wenn Sie mit PHP schreiben, können Sie den Bereich für das erste Wort erstellen. 2 - Verwenden von jQuery. Sie können den Code unten sehen jQuery

$(document).ready(function(){ 
    var text = $("#tourname").html(); 
    var firstword = text.substr(0,text.indexOf(' ')); // to get the first word 
    var remaining = text.substr(text.indexOf(' ')+1); // remianing words 
    var final = '<span>'+firstword+'</span> '+ remaining // combining by adding <span> around the first word 
    $("h1").html(final); 
    }); 

Answer 2

Verwendung dieses:

var strArr = $("#tourname").html().split(' '); 
$("h1 span").html(strArr.shift()); 
$("h1").append(document.createTextNode(strArr.join(" "))); 

Diese eine Hilfe sein sollte. Beachten Sie auch diese fiddle

Dies wird nur für Ihre Verwendung spezifisch sein. Für mehr Flexibilität mit der Anzahl der Textelemente verwenden strArr.splice(index, number_of_elements_to_include_in_span); statt strArr.shift();