Remplacer uniquement le texte dans un div en utilisant jquery

104

J'ai un div comme:

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

J'essaie de changer uniquement le texte de "Salut je suis texte" à "Salut je suis remplacer" en utilisant jquery. Cela pourrait être facile mais je ne suis pas en mesure de le faire.

L' utilisation se $('#one').text('')jette tout l'ensemble #Onediv.

javascript jquery manojadams
la source
Il pourrait être utile de faire un violon
Inkbug
Utilisez $ ('# one'). Find ('. First'). Text ('Salut je suis remplacer'); au lieu de $ ('# one'). text (); ou vous pouvez accéder directement à l'élément et remplacer le texte en utilisant $ ('. first'). text ('Salut je suis remplacer');
Kartik Chauhan

Réponses:

134

Le texte ne doit pas être isolé. Mettez - le dans un spanélément.

Changez-le en ceci:

<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
la source
51
Cela ne répond pas à la question du PO, qui n'a pas dit qu'il contrôlait le HTML.
tar
1
cela fonctionne, mais comment peut-il être exécuté ou non? puis-je exécuter une exception si le champ est vide ou si la balise est modifiée? dans les liaisons infructueuses parce que ce div créé par code.fr à partir de REST ou d'une base de données
sabre tabatabaee yazdi
122

Trouvez les nœuds de texte ( nodeType==3) et remplacez le textContent:

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

Exemple en direct: http://jsfiddle.net/VgFwS/

Jamiec
la source
6
Vraiment super réponse!
wcolbert
6
Cela devrait être la réponse acceptée car cela ne vous oblige pas à changer le html!
Wouter Rutgers
2
@Jamiec FWIW J'adore cette réponse car elle permet le remplacement sans se soucier de Borking le balisage / scripts , etc.
sehe
3
Cela a parfaitement fonctionné pour moi. Parfois, nous travaillons dans des situations qui ne permettent pas de changer le HTML (ie SharePoint). Merci
Mark P.
14

Vous devez définir le texte sur autre chose qu'une chaîne vide. De plus, la fonction .html () devrait le faire tout en préservant la structure HTML du div.

$('#one').html($('#one').html().replace('text','replace'));
gcochard
la source
Bien que cela fonctionne dans ce cas, je n'aime pas cette option car si vous remplaçiez le mot «premier» par le mot «deuxième» ou simplement «i» par «», cela gâcherait vos balises
JSON
10

Si vous connaissez réellement le texte que vous allez remplacer, vous pouvez utiliser

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

http://jsfiddle.net/5rWwh/

Ou

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

$('#one').contents(':not(*)') sélectionne les nœuds enfants non élémentaires dans ce cas, les nœuds de texte et le deuxième nœud est celui que nous voulons remplacer.

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

Musa
la source
2
De jQuery 1.8.3 $('#one').contents(':not(*)')ne sélectionnera rien.
BruceHill
0

Une autre approche consiste à conserver cet élément, à modifier le texte, puis à rajouter cet élément

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

Juste au cas où vous ne pouvez pas changer le HTML. Très primitif mais court et fonctionne. (Cela videra le div parent, donc les div enfants seront supprimés)

$('#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>
Développer l'extrait

RetourTable
la source
1
Cela supprime toutes les divs enfants de #one
Scot Nery
1
@ScotNery merci, j'ai mis à jour la réponse. (Bien que cela réponde techniquement à cette question particulière) Je suppose qu'à part envelopper le texte avec une balise qui a un identifiant, ce serait assez difficile. La seule autre chose est de faire correspondre une chaîne à remplacer, mais c'est vraiment fragile.
RetourTable