Replace multiple 's with only one

问题

How do I use JavaScript to detect

<br>
<br>
<br>

to become one

<br>

I tried with:

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

but this is not working for me.

回答1:

Simpler:

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

This will allow optional tag terminator (/>) and also spaces before tag end (e.g.   or  ).

回答2:

CSS Solution

If you want to disable the effect of multiple   on the page, you can do it by CSS without using JavaScript:

br + br { display: none; }

Check the jsFiddle demo.

However, this method is ideal when you are working with tags, something like this:

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

In other cases, like this:

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

It will fail (as CSS passes text nodes). Instead, use a JavaScript solution.

JavaScript Solution

// 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';
        }
    }
};

Check the jsFiddle demo.

回答3:

What is the point of sending HTML, which is in a form that you don't want, to the client browser and making it run JavaScript code to clean it up? This looks like a bad design.

How about fixing all your static HTML, and HTML generation, so that these superfluous   elements do not occur in the first place?

If you use JavaScript to modify the document object, do so for dynamic effects that cannot be achieved in any other way.

回答4:

Wouldn't something like this be the right approach:

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

EDIT: No, it's wrong, because its definition of "contiguous" is too loose, as per BoltClock.

回答5:

Try this

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

It will replace n number of   into one.

Demo

回答6:

Try this:

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

DEMO: jsfiddle

回答7:

I would go with this:

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

However, after reading the comments in another post here I do consider that you should try to avoid doing this in case you can correct it in the back end.

回答8:

This solution is jQuery + DOM only, does not manipulate HTML as string, works with text nodes, ignores whitespace only text nodes:

$('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();
  }
});

See: https://jsfiddle.net/kov35jct/

来源：https://stackoverflow.com/questions/17061931/replace-multiple-brs-with-only-one-br

标签

javascript