如何去除 标签并用 和 标签换行？答案

【问题标题】：How to strip out tags and wrap lines with and tags?如何去除 标签并用 和 标签换行？
【发布时间】：2011-06-09 18:27:12
【问题描述】：

这就是 HTML 代码的样子。我需要去掉 br 标记并将行包装在段落标记中（即带日期的行）。每个日期都应包含在自己的段落标签中。

<html>
<head><script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>


<h2>Other Events</h2>                       
<p>
<strong>Venue name</strong>
</p>
<div class="details">
<p>
Wednesday, May 11, 2011 <br>
Wednesday, June 08, 2011 <br>
Wednesday, July 13, 2011 <br>
Wednesday, August 10, 2011 <br>
Wednesday, September 14, 2011 <br>
Wednesday, October 12, 2011 <br>
Wednesday, November 09, 2011 <br>
19.00
<br>
</p>
</div>

</body>
</html>

我尝试了在 Google 上搜索后找到的这段 jQuery 代码，但它根本不起作用：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('body').html($('body').html().replace(/<br>\*/g,"</p><p>"));
});

我也尝试了这段代码，但不是将日期包装在段落标签中，而是在每行的末尾放置了空的段落标签：

$(document).ready(function(){
$('.details p br').replaceWith('<p></p>');
});

这就是 HTML 输出的样子。如您所见，它没有正确地用 p 标签包裹日期行：

<div class="details">
<p>
Wednesday, May 11, 2011 <p></p>
Wednesday, June 08, 2011 <p></p>
Wednesday, July 13, 2011 <p></p>
Wednesday, August 10, 2011 <p></p>
Wednesday, September 14, 2011 <p></p>
Wednesday, October 12, 2011 <p></p>
Wednesday, November 09, 2011 <p></p>
19.00
<p></p>
</p>
</div>

有人知道解决这个问题的方法吗？

【问题讨论】：

我会编写一个自定义解析器，女巫会逐行解析，然后在需要的地方附加有效标签...：D

标签： javascript jquery html

【解决方案1】：

编辑：通过以这种方式使用标签，你的运行是整个目的，你应该尝试删除 标签并将文本放在@987654324中@ 元素，效果相同，但语义正确。

Edit2：我认为您想要以上述方式，只需三遍阅读您的问题，我想我明白了！

var $p = $('.details p');
$p.contents()
  .filter(function() { return this.nodeType == 3; }) // Select all textnodes
  .wrap('<p>') // Place them inside paragraph elements

$('br', $p).remove(); // Remove all break elements

工作小提琴： http://jsfiddle.net/garreh/UWDw5/1/

【讨论】：

谢谢，这很好用。我希望它以这种方式格式化的原因是因为我需要在第二个和后续日期行中添加一个 jQuery 切换功能，以便在页面加载时默认隐藏它们，然后用户可以单击一个链接来显示另一个日期。我知道我只能将切换附加到段落元素而不是 br 标签。我已经整理好了切换代码。再次感谢您的帮助。