Jquery $ (Element) .contents(). First(). Text ("neuer Text") funktioniert nicht?

Question

Ich kann nichts darüber bei Google oder hier finden.

ich ein div mit drin haben, einige Text und einige html als solche:

<div id="test-div"> 
    http://<strong>somewebsite.com</strong>/big/long/unfriendly/path/ 
</div> 

Was ich tun möchte, ist ein <wbr> nach jedem Schrägstrich hinzufügen. (Weil der Wert nicht anders umschließt und meine Tabelle durcheinander bringt). Ein einfacher Ersatz auf der $('#test-div').html() wird auch mit dem starken Tag zu tun, so dass das keine Option ist.

Ich dachte mit $('#test-div').contents(), um die Textteile herauszufiltern (rekursiv) würde funktionieren. Allerdings kann ich nicht die einzelnen zurückgegebenen Bits bearbeiten. Ich würde erwarten, dass dies ändert sich die http: // Teil:

Allerdings tut es nichts. Ich weiß, ich habe meine Navigation richtig, weil etwas wie dieses:

funktioniert.

Warum kann ich das Textbit nicht ändern? (Eine elegantere Lösung für das ursprüngliche Problem würde auch groß sein)

Answer 1

Schließlich fand ich meine eigene Antwort dank this und this Artikel.Ich habe jetzt eine Funktion, die den gesamten Text in allen Textknoten im Kontext ersetzt. Es kann auch HTML in diese Knoten einfügen.

JavaScript-Funktion:

function recursiveReplace(node, oldValue, newValue) { 
    if (node.nodeType === 3) { // text node 
     $(node).replaceWith(node.nodeValue.replace(oldValue, newValue)); 
    } else if (node.nodeType === 1) { // element 
     $(node).contents().each(function() { 
      recursiveReplace(this, oldValue, newValue); 
     }); 
    } 
} 

//To call 
div = $('#test-div'); 
recursiveReplace(div[0], "/", "/<wbr />"); 

Dies löste es in allgemeiner Weise.

Answer 2

haben Sie versucht,

$(element).html('your content here'); 

Answer 3

Verwendung wie folgt aus:

$('#test-div').contents().filter(function(){ 
    return $.trim($(this).text()) == 'http://'; 
}).remove().end().prepend('something'); 

demo

oder

$('#test-div').contents().first().remove().end().prepend("something"); 

demo

Answer 4

Wie wärs mit einem regex die / ‚s mit /<wbr> ersetzen?

$('#test-div').html($('#test-div').html().replace(/(<)?[/]/g, function($0,$1){ 
    return $1?$0:'/<wbr>'; 
})); 

/(<)?[/]/g für alle Schrägstriche aussehen, sondern auch spezielle Kenntnis von irgendwelchen Endtags nehmen.

return $1?$0:'/<wbr>'; wird </, ignorieren aber andere / mit /<wbr>

Sie verschließt die wbr Tag prüfen, ersetzen soll.

Answer 5

Haben Sie so etwas probiert?

$('#test-div').html().replace('/', '/<wbr>'); 

Answer 6

, weil, wenn Sie zuerst sagen, dass es Ihnen [object Text] geben und Texteigenschaft nicht mit ihr arbeiten, einfachste Lösung ist:

$("#test-div").contents()[0].textContent="Something"; 

Jsfiddle demo