0

次のようなテキストの段落があります。

<p>
   <span style='font-family:arial'>
      Some text
   </span>
</p>

また

<p>
   <strong>
      Some more text
   <strong>
</p>

また

<p>
   <strong>
      <em>
         Yet more text
      </em>
   </strong>
</p>

ネストされたタグがいくつあっても、 を使用するだけでテキストだけを取得できます$('p').text()。問題は<br>、途中でポップアップするときです。その場合、テキストが入っているタグが何であれ、分割されます。たとえば、次のようになります。

<p>
  <strong>
     Some more text
  </strong>
</p>

これに変わります：

<p>
  <strong>
     Some 
  </strong>
  <br />
  <strong>
     more text
  </strong>
</p>

ご覧のとおり、<strong>タグには 1 つだけでなく 2 つのテキスト ノードがあります。私がやりたいのは、元の親タグを持つテキストだけを取得し、<br>別のテキストノードとして扱いますが、<br>誘導タグ分割の侵入はありません。たとえば、上記の 2 ノードの HTML を考えると、これを返す関数が必要なだけです。

<p>
  <strong>
     Some 
     <br />
     more text
  </strong>
</p>

いくつかの特定の形式ではそれで問題ありませんが、保持する必要があるさまざまな種類の HTML ネスト (<p><strong><em>または<p><em><strong>またはなど) が存在する可能性があります<p><strong><span>。

編集

ループで迷子になるよりも、最も簡単な方法$('p').html()は<br>? 左側には<br>終了タグがあり、右側には開始タグがあります。これに対する正規表現ソリューションはありますか？

4

2 に答える 2

2
  1. find each <br> within a <p>
  2. for each of those <br> elements, compare the names of the immediately preceding and following elements
  3. if their names are equal, move the <br> and the contents of the following element into the preceding element
  4. remove the now empty following element

This:

$("p").clone().find("br").each(function() {
  var $this = $(this), $prev = $this.prev(), $next = $this.next();
  if ( $prev.length && $prev.prop("nodeName") === $next.prop("nodeName") ) {
    $prev.append( $this, $next.contents() );
    $next.remove();
  }
}).end().each(function () {
    console.log( $(this).html() );
});

(Note that I use clone() to avoid modifying the original.)

When applied to

<p>
  <strong>
     Some 
  </strong>
  <br />
  <strong>
     more text
  </strong>
</p>

writes this to the console

<strong>
   Some 
<br>
   more text
</strong>

http://jsfiddle.net/Tomalak/y3hSp/

Here is an iterative approach that collapses adjacent nodes that are separated by <br>, in form of a jQuery plugin:

$.fn.extend({
    collapseBreaks: function () {
        return this.each(function () {
            var done = false;

            while (!done) {
                done = true;

                $(this).find("br").each(function() {
                    var $this = $(this), 
                        $prev = $this.prev(), 
                        $next = $this.next();

                    if ( 
                        $prev.length 
                        && $prev.prop("nodeName") === $next.prop("nodeName") 
                    ) {
                        $prev.append( $this, $next.contents() );
                        $next.remove();
                        done = false;
                    }
                });       
            }
        });
    }
});

Use as

$("p").collapseBreaks();

http://jsfiddle.net/Tomalak/FJFgk/3/

于 2013-01-21T15:02:37.230 に答える
1

では、どうですか：

var innerString = thatPFromYourQuestion.innerHTML;
innerString = innerString.replace("<.*>", "");

これにより、すべてのタグが空の文字列に置き換えられ、内部のすべてのテキストが返されます。

私はあなたの質問を誤解したと思います。その段落の内容が文字通り欲しいだけの場合は、.innerHTMLまさにそれを行います。切り刻んだものが必要な場合は、その呼び出し<BR />のわずかに異なるバージョンを使用する必要があります。replace()

innerString = innerString.replace("<br>", "");
于 2013-01-21T14:56:03.150 に答える