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

Question

The code below searches WordPress content for words and replaces these words with a link and a div. It creates a problem where the div closes the <p> tag it was inserted into.

$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);

Why is the str_replace breaking the <p> tag like this?

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

If it cannot be fixed within PHP, can we fix this with jQuery? I want to put back the word thats been cut off, in this case " off." into the <p> tag that is closed after the link. And also remove the empty <p> tag in the end.

Answer 1

p elements contain phrasing content. div is not valid in phrasing content, it's valid in flow content. (Putting a div inside a p is like putting a p inside a p.) So the browser is making the best of invalid markup.

Try using a span rather than a div.