Ersetzen Sie nur Text in einem div mit jquery

103

Ich habe eine Div wie:

<div id="one">
       <div class="first"></div>
       "Hi I am text"
       <div class="second"></div>
       <div class="third"></div>
</div>

Ich versuche, nur den Text von "Hi, ich bin Text" in "Hi, ich ersetze" mit jquery zu ändern. Das mag einfach sein, aber ich kann es nicht.

Mit $('#one').text('')nur leert das ganze #Onediv.

javascript jquery Manojadams
quelle
Es könnte hilfreich sein, eine Geige
Inkbug
Verwenden Sie $ ('# one'). Find ('. First'). Text ('Hi, ich ersetze'); anstelle von $ ('# one'). text (); oder Sie können direkt auf das Element zugreifen und Text ersetzen, indem Sie $ ('. first'). text ('Hi, ich ersetze') verwenden.
Kartik Chauhan

Antworten:

134

Text sollte nicht alleine sein. Setzen Sie es in ein spanElement.

Ändern Sie es in dieses:

<div id="one">
       <div class="first"></div>
       <span>"Hi I am text"</span>
       <div class="second"></div>
       <div class="third"></div>
</div>

$('#one span').text('Hi I am replace');
Brian Ustas
quelle
51
Dies beantwortet nicht die Frage des OP, der nicht gesagt hat, dass er die Kontrolle über den HTML-Code hat.
Teer
1
Dies funktioniert, aber wie kann sicher ausgeführt werden oder nicht? Kann ich eine Ausnahme ausführen, wenn das Leerzeichen oder das Tag geändert wurde? in erfolglosen Bindungen, weil diese div von code.from REST oder Datenbank erstellt
Säbel tabatabaee yazdi
122

Suchen Sie die Textknoten ( nodeType==3) und ersetzen Sie die textContent:

$('#one').contents().filter(function() {
    return this.nodeType == 3
}).each(function(){
    this.textContent = this.textContent.replace('Hi I am text','Hi I am replace');
});

Live-Beispiel: http://jsfiddle.net/VgFwS/

Jamiec
quelle
6
Wirklich tolle Antwort!
wcolbert
6
Dies sollte die akzeptierte Antwort sein, da Sie dafür das HTML nicht ändern müssen!
Wouter Rutgers
2
@Jamiec FWIW Ich liebe diese Antwort, weil sie das Ersetzen ermöglicht, ohne sich Gedanken über das Borking der Markups / Skripte usw. machen zu müssen
siehe
3
Das hat bei mir perfekt funktioniert. Manchmal arbeiten wir in Situationen, in denen das Ändern des HTML-Codes nicht möglich ist (z. B. SharePoint). Danke
Mark P.
14

Sie müssen den Text auf etwas anderes als eine leere Zeichenfolge setzen. Darüber hinaus sollte die Funktion .html () dies tun, während die HTML-Struktur des div erhalten bleibt.

$('#one').html($('#one').html().replace('text','replace'));
gcochard
quelle
Während dies in diesem Fall funktionieren würde, mag ich diese Option nicht, denn wenn Sie das Wort "first" durch das Wort "second" oder nur "i" durch "" ersetzen würden, würde dies Ihre Tags durcheinander bringen
JSON
10

Wenn Sie den Text, den Sie ersetzen möchten, tatsächlich kennen, können Sie ihn verwenden

$('#one').contents(':contains("Hi I am text")')[0].nodeValue = '"Hi I am replace"';

http://jsfiddle.net/5rWwh/

Oder

$('#one').contents(':not(*)')[1].nodeValue = '"Hi I am replace"';

$('#one').contents(':not(*)') wählt in diesem Fall untergeordnete Knoten aus, die keine Elemente sind, und der zweite Knoten ist derjenige, den wir ersetzen möchten.

http://jsfiddle.net/5rWwh/1/

Musa
quelle
2
Von jQuery 1.8.3 $('#one').contents(':not(*)')wird nichts ausgewählt.
Bruce Hill
0

Ein anderer Ansatz besteht darin, dieses Element beizubehalten, den Text zu ändern und das Element dann wieder anzuhängen

const star_icon = $(li).find('.stars svg')
$(li).find('.stars').text(repo.stargazers_count).append(star_icon)
onmyway133
quelle
0

Nur für den Fall, dass Sie HTML nicht ändern können. Sehr primitiv aber kurz & funktioniert. (Es wird das übergeordnete Div leeren, daher werden die untergeordneten Divs entfernt.)

$('#one').text('Hi I am replace');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="one">
  <div class="first"></div>
  "Hi I am text"
  <div class="second"></div>
  <div class="third"></div>
</div>
Erweitern Sie das Snippet

ReturnTable
quelle
1
Dies entfernt alle Kinder Divs von #one
Scot Nery
1
@ScotNery danke, ich habe die Antwort aktualisiert. (Obwohl es diese spezielle Frage technisch beantwortet) Ich gehe davon aus, dass es ziemlich herausfordernd wäre, den Text nicht mit einem Tag zu versehen, das eine ID hat. Das einzige andere ist, eine zu ersetzende Zeichenfolge zu finden, aber sie ist wirklich zerbrechlich.
ReturnTable