3
votes

Masquer un mot spécifique dans un texte sans ajouter de nouvelle balise

J'ai ce code:

<div>Lorem ispum custom test</div>

Je cacherais seulement et ne supprimerais pas le mot «personnalisé» sans ajouter de nouvelle balise.

Comment puis-je faire? Merci

javascript jquery html css hide

3 commentaires

réponse simple: vous ne pouvez pas

Voulez-vous dire ne pas supprimer le texte du DOM ? Ou encore peut-il stocker dans une variable JavaScript le texte d'origine et afficher dans le DOM uniquement le texte le plus court? Cela peut être une solution.

ne pas supprimer le mot est assez clair

3 Réponses :

3
votes

Malheureusement, vous ne pouvez pas faire cela avec CSS mais vous pouvez remplacer le mot par jQuery comme ceci:

jQuery(document).ready( function($){
  $('div').each(function(){
    var txt = $('div').text();
    var res = txt.replace('custom', '');
    $('div').text(res);
  });
});

Important : gardez à l'esprit que cela passera par toutes vos divs car il n'y a pas d'attribut class ou id pour votre div

Veuillez également vérifier w3schools

0 commentaires

4
votes

Vous pouvez utiliser un masque ou un chemin de clip. Notez que ce n'est pas une solution robuste car vous devez ajuster la valeur en fonction des propriétés de la police et du texte réel:

<div class="box">Lorem ispum custom test</div>

.box {
  /* the text to hide start at 90px and end at 137px */
  clip-path: polygon(0 0, 90px 0, 90px 100%, 137px 100%, 137px 0, 100% 0, 100% 100%, 0 100%);
}

Avec clip-path:

<div class="box">Lorem ispum custom test</div>

.box {
  /* the text to hide start at 90px and end at 137px */
  -webkit-mask:linear-gradient(to right,#fff 90px,transparent 0 137px,#fff 0)
}

0 commentaires

1
votes

et voici comment vous pourrez utiliser votre Array plus tard.

<p id="par">this one is changed</p>

var strings = [];
var str = document.getElementById("par");
if (str.textContent.includes("one")){
  var now = str.textContent.replace("one ", "");
  str.textContent = now;
  strings.push("one ")
};
console.log(strings)

0 commentaires