J'utilise un éditeur WYSIWYG appelé KindEditor . J'ai constaté que, parfois, il ajoute automatiquement un <br> supplémentaire. Je veux savoir comment supprimer le <br> redondant à l'aide de jQuery.

Par exemple, dans les blocs de code ci-dessous, je souhaite supprimer le premier <br> du bloc de code A et du bloc de code B, et le réserver dans le bloc de code C.

Bloc de code A

<p>
  <br> <!-- it's useless now; need to remove -->
  Taiwan next
  <br>
  Taichung goes global!
</p>

Bloc de code B

<p>

  <br> <!-- it's also useless now because the text before it's empty; need to remove -->
  Taiwan next
  <br>
  Taichung goes global!
</p>

Bloc de code C

<p>
  New Taipei City
  <br> <!-- The content before it is not empty, so it's useful; can not be removed -->
  Taiwan next
  <br>
  Taichung goes global!
</p>

Je veux utiliser jQuery pour le faire, et j'ai écrit une sélection comme ci-dessous:

$("p > br:first-child")

Mais cela supprimera également <br> dans le bloc de code C, alors comment puis-je le faire en utilisant un sélecteur jQuery?

Bien que nous puissions le faire en utilisant regex, je veux le faire dans jQuery.

2
lucumt 13 avril 2018 à 06:50

5 réponses

Meilleure réponse

Vous pouvez utiliser filter pour vérifier si le nœud précédent est vide.

//console.log($("p > br:first-child"))

$('p > br:first-child').filter(function(){
    return this.previousSibling.wholeText.trim() == "";
}).remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<p>
  <br> <!-- it's useless now,need to remove -->
  Taiwan next
  <br>
  Taichung goes global!
</p>


<p>

  <br> <!-- it's also useless now due to the text before it's empty,need to remove -->
  Taiwan next
  <br>
  Taichung goes global!
</p>


<p>
  New Taipei City
  <br> <!-- The content before it is not empty,so it's useful,can not be removed -->
  Taiwan next
  <br>
  Taichung goes global!
</p>
1
Sam Battat 13 avril 2018 à 04:58

Vous pouvez également procéder de cette façon. Enveloppez le texte entre les caractères spéciaux et vérifiez s'il est nul ou non.

JS

var original = $("p").html();
$("p").prepend(":");
$("p > br:first-child").before(";");
var str = $("p").html();
var Strin = str.substring(str.lastIndexOf(":")+1,str.lastIndexOf(";"));
$("p").html(original);
if(Strin.trim() == ""){
$("p > br:first-child").remove();
}
$("p").html();

HTML

<p>
  New Taipei City
  <br> 
  Taiwan next
  <br>
  Taichung goes global!
</p>

Voici un violon

0
Smit Raval 13 avril 2018 à 05:08

Cela devrait aider:

<p>
  <br> <!-- it's useless now,need to remove -->
  Taiwan next
  <br>
  Taichung goes global!
</p>
<div id='test'>
</div>

$(document).ready(function() {
var final = ''
    if ($("p").html().trim().indexOf("<br>") == 0) {
    final = $("p").html().replace('<br>','');
  } else {
    final = $("p").html();
  }
  console.log(final);
  $("#test").html(final);
});
0
jitenderd 13 avril 2018 à 05:27

Cela supprimera tous les espaces à l'intérieur du p et supprimera les br uniquement s'ils se trouvent au début du p.

$("p").each(function(){
  var trimmedPText = $(this).html().trim();
  if(trimmedPText.indexOf("<br") == 0){
    $(this).children()[0].remove();
  }
});

J'ai utilisé trimmedPText.indexOf('<br') pour qu'il corresponde à <br>, <br/> ou <br />. Il pourrait y avoir une amélioration des performances en utilisant RegEx au lieu de cela, peut-être.

1
Fecosos 13 avril 2018 à 05:10

Cochez l'extrait ci-dessous ce n'est pas la réponse complète à votre question mais le point de départ ou la logique de manière à atteindre votre objectif.

Sous le code juste le premier premier élément de p. Maintenant, faites de la logique pour savoir s'il s'agit d'une balise br ou d'une chaîne, puis supprimez br.

$(document).ready(function(){
    $( "p" ).each(function( index ) {
      var elem = $(this).contents().eq(0).text();
      console.log(elem);
      // Now here check if it is br then remove br
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  <br> <!-- it's useless now,need to remove -->
  Taiwan next
  <br>
  Taichung goes global!
</p>

<p>
  <br> <!-- it's also useless now due to the text before it's empty,need to remove -->
  Taiwan next
  <br>
  Taichung goes global!
</p>

<p>
  New Taipei City
  <br> <!-- The content before it is not empty,so it's useful,can not be removed -->
  Taiwan next
  <br>
  Taichung goes global!
</p>
0
Nirali 13 avril 2018 à 04:57