繁体   English   中英

如何剥离<br>标签和换行<p>和</p>标签?

[英]How to strip out <br> tags and wrap lines with <p> and </p> tags?

这就是 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 output 的外观。 如您所见,它没有正确地用 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>

有谁知道解决这个问题的方法?

编辑:通过以这种方式使用<p>标记,您运行它的全部目的,而不是您应该尝试删除<br>标记并将文本放在<p>元素中,这将具有相同的效果,但在语义上是正确的。

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/

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM