1
votes

Remplacer le texte dans l'étiquette qui a une entrée à l'intérieur, sans affecter l'entrée

J'ai ce code:

<label class="hulkapps_check_option">
<input type="checkbox" data-price="4000.00">
Basic banner design (+$ 4000.00)
</label>

Je dois trouver le texte ".00" dans l'étiquette et le remplacer par "MXN" mais sans affecter l'entrée. Chaque fois que j'essaye quoi que ce soit pour remplacer le texte, cela supprime l'entrée à l'intérieur de l'étiquette. Comment puis-je remplacer un morceau de texte dans l'étiquette, sans supprimer l'entrée à l'intérieur?


3 Réponses :


0
votes

Vous pouvez utiliser le code ci-dessous, je vérifie simplement qu'il fonctionne pour moi.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label class="hulkapps_check_option_before">
    <input type="checkbox" data-price="4000.00">
    Basic banner design (+$ 4000.00)
</label>

<hr/>

<label class="hulkapps_check_option">
    <input type="checkbox" data-price="4000.00">
    Basic banner design (+$ 4000.00)
</label>
$(".hulkapps_check_option").text(function() {
  return $(this).text().replace(".00", " MXN");
});


2 commentaires

Bonjour, j'ai converti votre code en extrait de code - comme vous pouvez le voir, .text () supprime la case à cocher.


J'ai essayé ceci et cela supprime la case à cocher: lien



1
votes

La première option est de mettre votre texte dans un , puis il sera facilement accessible depuis jQuery. jQuery n'est pas conçu pour gérer très bien les nœuds contenant uniquement du texte.

Si vous ne pouvez pas modifier le code HTML pour une raison quelconque, vous pouvez utiliser .contents () et .this .nodeType === 3 (où 3 est un nœud de texte).

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label class="hulkapps_check_option_before">
    <input type="checkbox" data-price="4000.00">
    Basic banner design (+$ 4000.00)
</label>

<hr/>

<label class="hulkapps_check_option">
    <input type="checkbox" data-price="4000.00">
    Basic banner design (+$ 4000.00)
</label>
var h = $(".hulkapps_check_option").html().replace(/\.00/g, " MXN");
$(".hulkapps_check_option").html(h);

Vous pouvez utiliser .html () pour obtenir le texte avec l'entrée.

Bien que cela fonctionne dans ce scénario - il est trop fragile pour fonctionner dans le cas général (par exemple, si vous vouliez changer tout "mettre" avec "POST", vous obtiendrez ).

Vous perdez également tous les événements que vous auriez pu avoir contre des éléments à l'intérieur de l'étiquette.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="hulkapps_check_option">
  <input type="checkbox" data-price="4000.00">
  Basic banner design (+$ 4000.00)
</label>
$('.hulkapps_check_option').contents().each(function() {
  if (this.nodeType === 3) {
    this.textContent
      ? this.textContent = this.textContent.replace(/\.00/g, " MX")
      : this.innerText = this.innerText.replace(/\.00/g, " MX")
  }
})


8 commentaires

Cette solution fonctionne! Merci pour ça. Je ne comprends pas vraiment le code. Pourriez-vous s'il vous plaît expliquer un peu de quoi il s'agit: .textContent et d'où il vient? et aussi l'interrogation et: symbole sur les lignes suivantes? Où puis-je trouver plus d'informations sur ce qu'ils sont et comment ils sont utilisés? Pouvez-vous également expliquer de quel type de formatage il s'agit? (/\.00/g, "MX"). Quel est le / \ et / g? Merci beaucoup!


:? - stackoverflow.com/questions/6259982/...


.textContent - dans jquery, nous faisons $ ("# id"). text () - la partie .text () se traduit en .textContent - mais dans certains navigateurs qui n'existe pas, vous devez donc utiliser .innerText à la place. Bon vieux navigateur-guerres / incompatibilités (que personne dira sans doute n'existe plus). C'est en partie pourquoi jquery est si populaire, pas besoin de s'inquiéter à ce sujet. C'est de la micro-optimisation d'utiliser .textContent plutôt que $ (). Text () .


.replace (regex, replacement) - utilisez .replace (/ regex / g, "replacement) // fournit l'expression régulière et / g indique toutes les occurrences. \. = match "." as . signifie "match any single character" et 00 signifie "match 00"


TBH, pas sûr que $ (). Text fonctionne avec des nœuds de texte, c'est pourquoi je l'ai laissé en utilisant .textContent / .innerText. stackoverflow.com/a/13817123/2181514


explication incroyable pour chaque bit. Merci beaucoup d'avoir pris le temps de fournir plus d'informations!


une autre question si vous avez gentiment le temps ... pourquoi devez-vous ajouter des regex à l'intérieur du .replace ()? Pourquoi cela ne fonctionnerait-il pas? .replace (". 00", "MXN") ?


Replace peut utiliser soit une expression régulière ou une chaîne. Vous pouvez utiliser la chaîne pour remplacer, c'est l'équivalent dans ce cas car le "regex" est très statique. Vous pouvez le changer en /\.\d\d/g qui supprimerait toutes décimales, sans utiliser ".00"



0
votes

Ce serait un moyen d'atteindre votre objectif en utilisant l'API DOM Javascript standard:

<label class="hulkapps_check_option">
  <input type="checkbox" data-price="4000.00">
  Basic banner design (+$ 4000.00)
</label>
const label = document.querySelector('.hulkapps_check_option');
const labelTextNode = label.childNodes[2];
label.removeChild(label.childNodes[2]);
label.appendChild(new Text(labelTextNode.wholeText.replace('.00', 'MXN')));


0 commentaires