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>

所以你看，标签中现在有 2 个文本节点<strong>，而不仅仅是一个。我想要做的是只获取带有原始父标签的文本，将其<br>视为另一个文本节点，但没有<br>-induced-tag-split-up 入侵。例如，给定上面的 2 节点 HTML，我只想要一个返回以下内容的函数：

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

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

编辑

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

4

2 回答 2

2
  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/

于 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 回答