6

私は、好みの段落タグの代わりに二重改行タグを生成する CMS を使用しています。私は試した：

$('<br /><br />').replaceWith('</p>');

笑い終わったら これが可能かどうか、可能であれば最善のアプローチ方法を教えてください。

更新 (OP コメントから):
段落は空ではありません。<p>最初にタグがあり、最後の段落は、その間の段落が二重タグ</p>で区切られて閉じます。<br>

私の問題であるエディター コードにアクセスできません。それはカスタムビルドでひどいものでした。

4

4 に答える 4

3

これを試す方法はいくつかあります。望ましいものは（すでにjQueryを使用しているため）おそらくcontents()を使用することです:

$('.your_cms_container').contents().filter(function() {
    return this.nodeType == 3;  // Only text nodes
}).wrap('<p></p>')

これにより、すべてのテキスト ノードが段落タグでラップされます。それに続いて、すべての
タグを取り除きます。

$('.your_cms_container').filter('br').remove();

もちろん、テキスト ノードがすべてメイン テキスト コンテナーの単純な子でない場合は、さらに複雑になります。

もう1つの（汚い）オプションは、htmlを手動でマングルし、完了したらjQueryに戻すことです。

var htmlAsString = $('.your_cms_container').html();    // Get the contents as simple text

... // Do nasty things to the string here

$('.your_cms_container').html(htmlAsString);    // Put it back and let jQuery try and sort out any mess

2 番目の方法が間違っていると言っているのではありません。しかし、やらなければならない場合でも、それは私を汚く感じさせます;-)

于 2012-05-21T14:51:45.610 に答える
2
  1. すべての<br>ノードを取得します。<p>必要に応じて、ブロック内に直接あるものを無視します。
  2. 次に、ノードごとに<br>、その直前または直後のテキスト ノードをラップします。
  3. 最後に、<br>ノードを削除します。

このアプローチはネストを処理し、リンクやページ レイアウトなどを破棄しません。

コード：

$('.your_cms_container br').each ( function () {
    if (this.parentNode.nodeName != "P") {
        $.each ([this.previousSibling, this.nextSibling], function () {
            if (this.nodeType === 3) { // 3 == text
                $(this).wrap ('<p></p>');
            }
        } );

        $(this).remove (); //-- Kill the <br>
    }
} );

アップデート：

OPの質問を編集した後、私は彼の特定の状況に十分に対処していないことに気付きました. （私は上記のコードを使用して、ユーザースクリプトで大きな効果を上げています。）

彼はこれを変更したいと考えています:

<p> "Paragraph 1" <br />
    <a href="http://xkcd.com/246/">Link, the first</a>
    Line after single break.
    <br /><br />
    "Paragraph 2"
</p>

これに：

<p> "Paragraph 1" <br />
    <a href="http://xkcd.com/246/">Link, the first</a>
    Line after single break.
</p>
<p> "Paragraph 2" </p>


問題は次のとおりです。ネストされた要素 (存在する場合) またはイベント ハンドラー (存在する場合) を破棄したくない場合。

これには、次のアプローチを使用します。

  1. のようなセレクターで問題のある段落だけを取得しp:has(br+br)ます。隣接するセレクターがテキスト ノードを無視することに注意してください。この場合、まさにそうしたくないことです。
  2. 問題のある各段落の内容を 1 つずつループします。
  3. ステート マシンを使用して、それぞれに新しい段落を作成し、コンテンツ ノードを適切な<br><br>に移動<p>します。

コードは次のようになります。jsFiddle で実際に動作しているのを見ることができます:

var badGraphs   = $("#content p:has(br+br)");
var targetP     = null;
var justSplit   = false;

badGraphs.each ( function () {
    var parentP = $(this);

    parentP.contents ().each ( function (J) {
        if (justSplit) {
            justSplit = false;
            // Continue the loop. Otherwise, it would copy an unwanted <br>.
            return true;    
        }
        var thisjNode   = $(this);
        var nextjNode   = $(this.nextSibling);

        if (thisjNode.is ("br")  &&  nextjNode.is ("br") ) {
            thisjNode.remove (); //-- Kill this <br>
            nextjNode.remove (); //-- and the next

            //-- Create a new p for any following content
            targetP     = targetP || parentP;
            targetP.after ('<p></p>');
            targetP     = targetP.next ("p");

            justSplit   = true;
        }
        else if (targetP) {
            //-- Move the node to its new home.
            targetP.append (this);
        }
    } );
} );
于 2013-10-07T00:51:54.977 に答える
0

サーバー言語がphpの場合は、使用できますstr_replace()

http://php.net/manual/en/function.str-replace.php

于 2011-10-11T08:40:21.553 に答える
-5

これはあなたの質問に対する答えです：

$( 'br' ).before( '<p></p>' ).remove();

しかし、言ったように、そのようなことをサーバー側で行う方が良いです

于 2011-10-11T08:46:55.537 に答える