web-dev-qa-db-fra.com

Remplacez plusieurs <br> par un seul <br>

Comment utiliser JavaScript pour détecter

<br>
<br>
<br>

devenir un

<br>

?

J'ai essayé avec:

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

mais cela ne fonctionne pas pour moi.

javascriptjqueryhtmlreplaceline-breaks
51
user610983

Plus simple:

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

Cela permettra le terminateur de balise facultatif (/>) et également des espaces avant la fin de la balise (par exemple <br /> ou <br >).

7
marekful

Solution CSS

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

br + br { display: none; }

Cependant, cette méthode est idéale lorsque vous travaillez avec des balises, quelque chose 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 ceci:

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

Il échouera (lorsque CSS passe des 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';
        }
    }
};
171
user1823761

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

Que diriez-vous de corriger tout votre HTML statique et la génération HTML, afin que ces _ <br> les éléments ne se produisent pas en premier lieu?

Si vous utilisez JavaScript pour modifier l'objet de document, faites-le pour les effets dynamiques qui ne peuvent être obtenus autrement.

10
Kaz

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

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

EDIT: Non, c'est faux, parce que sa définition de "contigu" est trop vague, comme par BoltClock.

1
Steve Bennett

Beaucoup d'autres réponses à cette question ne remplaceront que jusqu'à une certaine quantité d'éléments ou utiliseront des boucles complexes. Je suis venu avec un regex simple qui peut être utilisé pour remplacer tout nombre de <br> balises avec une seule balise. Cela fonctionne avec plusieurs instances de plusieurs balises dans une chaîne.

/(<br>*)+/g

Pour implémenter cela en JavaScript, vous pouvez utiliser le String.replace méthode:

myString.replace(/(<br>*)+/g, "<br/>");

Pour remplacer plusieurs <br/> tags, ajoutez un / au regex:

/(<br\/>*)+/g
0
Blake Stevenson

Essaye ça:

jQuery('body').html(
      jQuery('body').html().replace(/(?:<br>\s+){3,}/ig,"\n"));
);

DEMO: jsfiddle

0
Stephan

Essaye ça

$('body').html($('body').html().replace(/(<br>)+/g,"<br>"));

Il remplacera n nombre de <br> en un seul.

Démo

0
Amit

J'irais avec ceci:

$('body').html($('body').html().replace(/<br\W?\\?>(\W?(<br\W?\\?>)+)+/g,"<br>"));

Cependant, après avoir lu les commentaires dans un autre article ici, je considère que vous devriez éviter de le faire au cas où vous pourriez le corriger à l'arrière.

0
Jair Reina

Cette solution est uniquement jQuery + DOM, ne manipule pas le HTML en tant que chaîne, fonctionne avec les nœuds de texte, ignore les espaces blancs uniquement 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/

0
P.P. Koszta