web-dev-qa-db-ja.com

複数の<br>を1つだけの<br>に置き換える

JavaScriptを使用して検出する方法

<br>
<br>
<br>

一つになる

<br>

？

私が試した：

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

しかし、これは私のために働いていません。

javascriptjqueryhtmlreplaceline-breaks
51
user610983

よりシンプル：

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

これにより、オプションのタグターミネーター（/>）とタグの終わりの前のスペースも許可されます（例：<br />または<br >）。

7
marekful

CSSソリューション

ページ上の複数の<br>の効果を無効にしたい場合は、JavaScriptを使用せずにCSSで実行できます。

br + br { display: none; }

ただし、この方法は、次のようなタグを操作する場合に最適です。

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

他のケースでは、このように：

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

失敗します（CSSがテキストノードを渡すため）。代わりに、JavaScriptソリューションを使用してください。

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

望ましくない形式のHTMLをクライアントのブラウザーに送信し、それを実行させる JavaScript コードをクリーンアップする目的は何ですか？これは悪いデザインのようです。

すべての静的HTMLとHTML生成を修正して、これらの余分な<br>要素はそもそも発生しませんか？

JavaScriptを使用してドキュメントオブジェクトを変更する場合は、他の方法では実現できない動的効果のためにそうしてください。

10
Kaz

このようなものは正しいアプローチではないでしょう：

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

編集：いいえ、それは間違っています。なぜなら、「隣接」の定義は、BoltClockによると、あまりにも緩いからです。

1
Steve Bennett

この質問に対する他の多くの回答は、特定の量までの要素を置き換えるか、複雑なループを使用するだけです。 any<br>タグの数を1つのタグに置き換えるために使用できる単純な正規表現を思いつきました。これは、文字列内の複数のタグの複数のインスタンスで機能します。

/(<br>*)+/g

これをJavaScriptで実装するには、String.replaceメソッドを使用できます。

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

複数の<br/>タグを置き換えるには、/を正規表現に追加します。

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

これを試して：

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

デモ：jsfiddle

0
Stephan

これを試して

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

N個の<br>を1つに置き換えます。

デモ

0
Amit

私はこれで行きます：

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

ただし、ここの別の投稿のコメントを読んだ後は、バックエンドで修正できる場合に備えて、これを回避することをお勧めします。

0
Jair Reina

このソリューションはjQuery + DOMのみで、HTMLを文字列として操作せず、テキストノードで機能し、空白のみのテキストノードを無視します。

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

参照： https://jsfiddle.net/kov35jct/

0
P.P. Koszta