javascript - 从标签返回文本，其中最外层 HTML 标签适用于 jquery 中的所有文本节点

Question

我的文本段落可能是这样的:

<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> 中现在有 2 个文本节点。标签，不仅仅是一个。我想要做的是只获取带有原始父标签的文本，即 <br>被视为另一个文本节点，但没有 <br> -诱导标签 split 入侵。例如，给定上面的 2 节点 HTML，我只想要一个返回以下内容的函数:

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

对于一些给定的格式来说这很好，但是我可能需要保留不同类型的 HTML 嵌套(例如 <p><strong><em> 或 <p><em><strong> 或 <p><strong><span> 等等。

编辑

我认为最简单的方法是获取$('p').html()，而不是迷失在循环中。然后简单地砍掉 <br> 周围的所有标签？左边有<br>将是结束标签，右侧将有开始标签。那么有正则表达式解决方案吗？

Answer 1

1. 查找每个 <br>在<p>内
2. 对于其中每一个<br>元素，比较紧邻的前一个和后一个元素的名称
3. 如果名字相同，则移动 <br>并将后一个元素的内容放入前一个元素中
4. 删除现在为空的以下元素

这个:

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

^{(请注意，我使用 clone() 以避免修改原始内容。)}

应用于时

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

将其写入控制台

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

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

<小时/>

这是一种迭代方法，可折叠由 <br> 分隔的相邻节点。 ，以 jQuery 插件的形式:

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

用作

$("p").collapseBreaks(); 

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