如何从包装短代码中的每个 html 元素中删除 p 标签答案

【问题标题】：how to remove p tag from wrapping every html element in shortcode如何从包装短代码中的每个 html 元素中删除 p 标签
【发布时间】：2017-01-11 18:34:43
【问题描述】：

在我的wordpress project 中，我使用简码来显示产品列表。我添加了如下的html。

<article class="teaser product tepr prio ">
<a href="http://localhost/svenskkinesiska/resor/sichuans-parlor/">
<div class="itemwrap">
<img class="img-responsive " src="http://localhost/svenskkinesiska/wp-content/uploads/2016/12/banner2@2x-1920x740-c-center-373x239-c-center.png" srcset="http://localhost/svenskkinesiska/wp-content/uploads/2016/12/banner2@2x-1920x740-c-center-530x340-c-center.png 768w, http://localhost/svenskkinesiska/wp-content/uploads/2016/12/banner2@2x-1920x740-c-center-767x492-c-center.png 1400w" alt="SICHUANS PÄRLOR" />
<div class="itemtextwrap">
<div class="teprb">
<div class="middlecenter">
<h3><span>Sichuans pärlor</span></h3>
</div>
</div>
<span class="duration">8 DAGAR - </span><span class="price">fr 1:-</span></div>
<div class="cprice_cdays small">
<div class="tableBased">
<div class="tableCelled"><span class="cprice">8 dagar, pris från </span><span class="cdays">1</span></div>
</div>
</div>
</div>
</a></article>

但它带有额外的 p 标签如下所示。我尝试了 wpautop 但无济于事。如何解决这个问题？欢迎任何帮助/建议。

<article class="teaser product tepr prio ">
<a href="http://localhost/svenskkinesiska/resor/sichuans-parlor/"></p>
<div class="itemwrap">
<img class="img-responsive " src="http://localhost/svenskkinesiska/wp-content/uploads/2016/12/banner2@2x-1920x740-c-center-373x239-c-center.png" srcset="http://localhost/svenskkinesiska/wp-content/uploads/2016/12/banner2@2x-1920x740-c-center-530x340-c-center.png 768w, http://localhost/svenskkinesiska/wp-content/uploads/2016/12/banner2@2x-1920x740-c-center-767x492-c-center.png 1400w" alt="SICHUANS PÄRLOR" /></p>
<div class="itemtextwrap">
<div class="teprb">
<div class="middlecenter">
<h3><span>Sichuans pärlor</span></h3>
</div>
</div>
<p><span class="duration">8 DAGAR - </span><span class="price">fr 1:-</span></div>
<div class="cprice_cdays small">
<div class="tableBased">
<div class="tableCelled"><span class="cprice">8 dagar, pris från </span><span class="cdays">1</span></div>
</div>
</div>
</div>
<p></a></article>

【问题讨论】：

已知WordPress问题，解决方法如下：ru.wordpress.org/plugins/shortcode-empty-paragraph-fix,gist.github.com/bitfade/4555047
@SergeyLebedev 两个解决方案都不起作用。第一个解决方案什么也没做，而第二个解决方案只是没有显示 html。

标签： html wordpress shortcode

【解决方案1】：

你可以用 jquery 做到这一点：

$("b").each(function() {
$(this).replaceWith(this.childNodes);
});

注意：这会保留您在 .text() 可能对其进行转换的任何 HTML。如果您想完全删除您可以使用：

$("p").html(function(i,h){ return h.replace(/<b>/g,'').replace(/<\/b>/g,''); });

或result = str.replace(/(<p[^>]+?>|<p>|<\/p>)/img, "");

或者试试这个：

 `var str = "Some awesome text with a <p class='myClass'>new paragraph</p> and more text.";

    var $temp = $("<div>").html(str);
    $temp.find("p").each(function() { $(this).replaceWith(this.childNodes); });

    var output = $temp.html();`

【讨论】：