str_replace，用 div 替换单词会导致 p 标记中断

Question

下面的代码在WordPress内容中搜索单词，并用链接和div替换这些单词。它会产生一个问题，即div 关闭它插入到的<p>标记。

$myposts = get_pages(args...);
$replace = array();
$i = 1;
foreach( $myposts as $post ) {
    setup_postdata($post);
    $replace[get_the_title()] = '<a href="#popupBasic' . $i . '" data-rel="popup">' . get_the_title() . '</a><div data-role="popup" class="tooltipBox" id="popupBasic' . $i . '">' . get_the_content() . '</div>';
    $i++;
}
$text = str_replace(array_keys($replace), $replace, $text);

为什么str_replace会这样打破<p>标签？

<div>
    <p>Some random text thats been <a href="#" class="link">cutt</a></p><div style="display: none;"><!-- placeholder --></div> off.<p></p>
</div>

如果它不能在PHP中修复，我们可以用jQuery解决这个问题吗？我想把被切断的单词放回链接后关闭的<p>标签中，在本例中为"off."。并最终删除空<p>标签。

Answer 1

p元素包含措辞内容。 div在措辞内容中无效，但在流内容中有效。（将div放在p就像将p放在p内一样。因此，浏览器正在充分利用无效标记。

尝试使用span而不是div。