Remplacer plusieurs <br> par un seul <br>.

Question

Comment puis-je utiliser JavaScript pour détecter

<br>
<br>
<br>

pour devenir un

<br>

?

J'ai essayé avec :

jQuery('body').html().replace(/(\<br\>\r\n){3, }/g,"\n");

mais cela ne fonctionne pas pour moi.

Answer 1

Solution CSS

Si vous voulez désactiver l'effet de multiples <br> sur la page, vous pouvez le faire par CSS sans utiliser JavaScript :

br + br { display: none; }

• Vérifiez le Démonstration de jsFiddle .

Cependant, cette méthode est idéale lorsque vous travaillez avec des balises, comme ceci :

<div>Text</div><br /><br /><br />
<div>Text</div><br /><br /><br />
<div>Text</div><br /><br /><br />

Dans d'autres cas, comme celui-ci :

Hello World<br />   <br />
Hello World<br />   <br />
Hello World<br />   <br />

Il échouera (comme CSS passe les nœuds de texte). Utilisez plutôt une solution JavaScript.

---

Solution JavaScript

// It's better to wait for document ready instead of window.onload().
window.onload = function () {
    // Get all `br` tags, defined needed variables
    var br = document.getElementsByTagName('br'),
        l = br.length,
        i = 0,
        nextelem, elemname, include;

    // Loop through tags
    for (i; i < l - 1; i++) {
        // This flag indentify we should hide the next element or not
        include = false;

        // Getting next element
        nextelem = br[i].nextSibling;

        // Getting element name
        elemname = nextelem.nodeName.toLowerCase();

        // If element name is `br`, set the flag as true.
        if (elemname == 'br') {
            include = true;
        }

        // If element name is `#text`, we face text node
        else if (elemname == '#text') {
            // If text node is only white space, we must pass it.
            // This is because of something like this: `<br />   <br />`
            if (! nextelem.data.replace(/\s+/g, '').length) {
                nextelem = br[i+1];
                include = true;
            }
        }

        // If the element is flagged as true, hide it
        if (include) {
            nextelem.style.display = 'none';
        }
    }
};

• Vérifiez le Démonstration de jsFiddle .

Answer 2

Quel est l'intérêt d'envoyer du HTML, qui est dans une forme que vous ne voulez pas, au navigateur du client et de lui faire exécuter JavaScript code pour le nettoyer ? Cela ressemble à une mauvaise conception.

Et si vous répariez votre HTML statique et votre génération de HTML de façon à ce que ces éléments superflus <br> les éléments ne se produisent pas en premier lieu ?

Si vous utilisez JavaScript pour modifier l'objet document, faites-le pour obtenir des effets dynamiques qui ne peuvent être obtenus d'aucune autre manière.

Answer 3

Plus simple :

var newText = oldText.replace(/(<br\s*\/?>){3,}/gi, '<br>');

Cela permettra d'utiliser le terminateur de balise optionnel (/>) ainsi que les espaces avant la fin de la balise (ex. <br /> o <br > ).

Answer 4

Cette solution est uniquement jQuery + DOM, ne manipule pas le HTML en tant que chaîne, fonctionne avec des nœuds de texte, ignore les espaces blancs uniquement pour les nœuds de texte :

$('br').each(function () {
  const {nodeName} = this;

  let node = this;

  while (node = node.previousSibling) {
    if (node.nodeType !== Node.TEXT_NODE || node.nodeValue.trim() !== '') {
      break;
    };
  }

  if (node && node !== this && node.nodeName === nodeName) {
    $(node).remove();
  }
});

Voir : https://jsfiddle.net/kov35jct/

Answer 5

Est-ce que quelque chose comme ça ne serait pas la bonne approche :

$("br~br").remove()

EDIT : Non, c'est faux, car sa définition de "contigu" est trop large, comme le dit BoltClock.