JQuery changement intérieure du texte, mais de préserver html

Je voudrais changer le texte d'un élément HTML, mais de préserver le reste de l'intérieur html avec jQuery.

Par exemple:

<a href="link.html">Some text <img src="image.jpg" /></a>

remplacer "texte" avec un "Autre texte", et le résultat devrait ressembler à:

<a href="link.html">Other text <img src="image.jpg" /></a>

EDIT:
Ma solution actuelle est la suivante:

var aElem = $('a');
var children = aElem.children();

aElem.text("NEW TEXT");
aElem.append(children);

Mais il doit y avoir une façon plus élégante de le faire.

tu veux changer la valeur, mais sur lequel l'événement??

InformationsquelleAutor Drejc | 2011-03-08

jquery

34

Cela semble très bien fonctionner.

Démonstration En Direct
```
<html>
    <head>
    </head>
    <body>
        <a href="link.html">Some text <img src="img.jpg" /></a>
    </body>

    </html>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var $link = $('a');
            var $img = $link.find('img'); 
            $link.html('New Text');
            $link.append($img);
        });
    </script>
```
- Oui, c'est semblable à ma solution actuelle. J'utilise les enfants() de la propriété au lieu et réinsérer les enfants dans l'élément. Cela fonctionne bien, mais je me demandais si il ya une meilleure solution.
- Vous devez utiliser $link.children('img') au lieu de find() méthode parce que vous voulez que les enfants directs. Utilisation find() à la recherche par le biais de petits-enfants.
- Cette solution fonctionne très bien tant que vous n'avez pas les écouteurs d'événement lié à la page HTML à l'intérieur de la <a> tag. Sinon, vous devrez ajouter ceux des auditeurs de nouveau.
InformationsquelleAutor Brandon Boone
32

Puisque vous ne pouvez pas modifier le lien d'une option serait de tout simplement utiliser replace
```
$("a").html($("a").html().replace("Some text", "Other text"));
```
Exemple sur jsfiddle.
- Pourquoi la baisse de vote? en utilisant cette méthode permettrait de conserver l'original de balisage. Ex. <a><img/>Some text<img/> </a> à détacher/rattacher les résultats dans <a>Other Text<img/><img/></a> tout en utilisant un simple de remplacer le maintient de la structure.
- Que faire si le <img> balise contient Some text ??
- Je ne sais pas pourquoi je downvoted votre réponse, doit avoir été une erreur. Juste vu un “+9” sur mon score et je me demandais pourquoi un point a disparu et que vu mon downvote ici. Je ne peut pas révoquer le downvote jusqu'à ce que la réponse est édité :/
- Un peu naïve, non? J'ai voté cela parce que, évidemment, la chaîne "texte" ne sera pas le seul être remplacé lorsqu'il est déployé. Bien sûr, ce serait d'autres chaînes dans un site dynamique. Par conséquent, il est impossible de compter sur la correspondance de chaîne comme ceci.
- Pourrait être améliorée par la mise en cache de la sélection jQuery
- Aussi le présent document remplace uniquement la première occurrence. Si vous voulez la remplacer plus d'une fois, RegExp va faire.
InformationsquelleAutor Mark Coleman
20

Envelopper le texte que vous voulez modifier dans un laps
```
<a href="link.html"><span>Some text</span> <img src="image.jpg" /></a> 

$('a span').html( 'new text' );
```
- Ne peut pas le faire, parce que les éléments sont à construire, de façon dynamique à partir d'une autre source.
- C'est cependant, la meilleure réponse pour la plupart des gens.
InformationsquelleAutor meouw
11

Ma solution, bien qu'un peu en retard.
```
$('a').each(function() {
    var contents = $(this).contents();
    if (contents.length > 0) {
        if (contents.get(0).nodeType == Node.TEXT_NODE) {
            $(this).html('NEW TEXT').append(contents.slice(1));
        }
    }
});
```
Quelques remarques:
1. contents() comprend les nœuds de texte, à la différence de children().
2. Il est nécessaire de créer un copier du contenu via var contents = ... ou bien les éléments restants sont perdus à jamais, une fois remplacé par $(this).html('NEW TEXT').
3. La length case est facultative mais recommandée.
4. La nodeType case est facultative mais recommandée.
- Cela semble être le moyen idéal d'aller. Ce serait également le travail: $(this).contenu().filter(function() { return this.nodeType == 3; }).each( function() { this.nodeValue = "whatever"; })
- est-ce à préserver les événements liés aux enfants?
- Ce n'est pas parce qu'il affecte la propriété innerHTML. Voir @jim_kastrin de réponse pour une solution qui ne.
InformationsquelleAutor Andrew Cheong
10

Une alternative serait d'utiliser la contents() méthode comme suit:

Donné
```
<a href="link.html">Some text <img src="image.jpg" /></a>
```
vous pouvez remplacer 'Some text' avec jQuery
```
var text = $('a').contents().first()[0].textContent;
$('a').contents().first()[0].textContent = text.replace("Some text", "Other text");
```
jsFiddle exemple ici.

L'idée de contents() a été inspiré par cette question, a répondu par l'utilisateur charlietfl.
- Cela semble être la réponse la plus complète, car tout les écouteurs d'événement lié à l'enfant HTML nœuds ne seront pas affectés par les changements.
- J'ai toujours eu des problèmes avec des choses en rupture avec cette méthode, mais Darryl Ceguerra réponse a parfaitement fonctionné
InformationsquelleAutor jim_kastrin
7

Vous pouvez la changer .contenu()
```
$('.yourElement').contents()[0].data = 'New Data';
```
où dans votre cas, l' "[0].de données" est vos données de texte

InformationsquelleAutor Darryl Ceguerra
1

essayer ce code
```
$('a').live('click', function(){
    var $img = $(this).find('img'); 
    $(this).text('changed');
    $(this).append($img);
});
```
- Cela ne fonctionne pas comme il remplacera l'ensemble de la partie intérieure, y compris la tenue des éléments HTML.
InformationsquelleAutor diEcho

Efficace et robuste qui ne nécessite pas que vous sachiez ce que les éléments intérieurs sont ou de ce que le texte est:

var $a = $('a');
var inner = '';
$a.children.html().each(function() {
    inner = inner + this.outerHTML;
});
$a.html('New text' + inner);

InformationsquelleAutor anthonygore

1

utilisation de quelques plaine js fonctionnalités:

$('a')[0].firstChild.nodeValue = "Texte";

InformationsquelleAutor Drea58
0

Vous aurez besoin d'ajouter dans un <span> élément et modifier le texte de cet élément, par exemple:
```
<a href="link.html"><span id="foo">Some text</span><img src="image.jpg" /></a>
```
Ensuite, vous pouvez appeler à partir de jQuery:
```
$("#foo").html("Other text");
```
Et votre résultat sera effectivement:
```
<a href="link.html"><span id="foo">Other text</span><img src="image.jpg" /></a>
```
InformationsquelleAutor Brian Driscoll

C'est une amélioration que j'ai fait pour le jquery.uniforme de la bibliothèque.
Plus précisément le $.uniform.update() fonction.
J'ai pris l'idée de acheong87 et changé un peu.

L'idée est de changer le texte dans un span, mais de préserver l'intérieur HTML et les liaisons d'événements.
Pas besoin de stocker et à ajouter du code HTML de cette façon.

if ($e.is("input[type=button]")) {
    spanTag = $e.closest("span");
    var contents = spanTag.contents();

    if (contents.length) {
        var text = contents.get(0);

        //Modern browsers support Node.TEXT_NODE, IE7 only supports 3
        if (text.nodeType == 3)
            text.nodeValue = $e.val();
    }
}

InformationsquelleAutor Tim Vermaelen

J'ai ajouté une fonction jQuery pour ce besoin.

vous pouvez avoir besoin de convertir le html entités de représentation de texte, j'ai donc ajouté decodeEntities fonction.

function decodeEntities(encodedString) {
 if (typeof encodedString != "string") return encodedString;
 if (!encodedString) return "";
 var textArea = document.createElement('textarea');
 textArea.innerHTML = encodedString;
 return textArea.value;
}
jQuery.fn.textOnly = function(n) {
  if (this.length > 0)
   $(this).html(decodeEntities($(this).html()).replace($(this).text(), n));
  return $(this);
 }

Exemple d'utilisation
$('selector').textOnly('some text')

InformationsquelleAutor Yechezkel Deren

Ma version générique:

let button = $('#yourElement');
button.html(button.html().replace(button[0].innerText, "New Text"));

InformationsquelleAutor oceanBT

D'abréviation pour plus d'éléments et de pointe de texte à modifier:

elemshtml = '';
$("a *").each(function(){elemshtml +=$(this)[0].outerHTML});
$("a").html('Some text' + elemshtml);

InformationsquelleAutor user3270784

Vous devez vous connecter pour publier un commentaire.