PHP DOM Document实现表格包裹table-responsive容器的问题解决

Hey there! Let's fix this problem properly—both the DOM manipulation hang and regex nesting issues you're facing are solvable with a few targeted tweaks. Here are two reliable approaches to modify your Summernote HTML output as needed:

1. Robust DOM Manipulation (Recommended for Complex HTML) #

The infinite hang likely happened because you were modifying the live DOMNodeList while iterating over it, which causes the list to dynamically update and loop indefinitely. Instead, convert the node list to an array first to avoid this. Here's the corrected code:

$inputHtml = '<div class="pasted"> <table class="table table-bordered" style="width: 100%;"> <tbody> <tr> <td> item 1 </td> </tr> </tbody> </table> <table class="table table-bordered" style="width: 100%;"> <tbody> <tr> <td> item 2 </td> </tr> </tbody> </table> </div>';

// Initialize DOM and handle encoding quirks
$dom = new DOMDocument();
libxml_use_internal_errors(true); // Suppress HTML parsing warnings
$dom->loadHTML(mb_convert_encoding($inputHtml, 'HTML-ENTITIES', 'UTF-8'), LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
libxml_clear_errors();

$xpath = new DOMXPath($dom);
// Target only tables inside .pasted that aren't already wrapped in table-responsive
$tables = $xpath->query('//div[contains(@class, "pasted")]/table[not(ancestor::div[contains(@class, "table-responsive")])]');

// Convert DOMNodeList to array to avoid dynamic iteration issues
$tableArray = iterator_to_array($tables);

foreach ($tableArray as $table) {
    // Create the table-responsive container
    $responsiveContainer = $dom->createElement('div');
    $responsiveContainer->setAttribute('class', 'table-responsive');

    // Add the custom class to the table
    $currentClasses = $table->getAttribute('class');
    $table->setAttribute('class', trim($currentClasses . ' table-summernote1'));

    // Move the table into the new container
    $responsiveContainer->appendChild($table);

    // Insert the container where the original table was
    $table->parentNode->insertBefore($responsiveContainer, $table);
}

// Output the modified HTML
echo $dom->saveHTML();

This method is future-proof—it handles nested elements, unexpected whitespace, and won't break if Summernote adjusts its output slightly.

2. Stable Regex for Predictable HTML #

If your Summernote output has a consistent structure, regex can work without nesting issues if you target the .pasted container first, then modify tables inside it:

$inputHtml = '<div class="pasted"> <table class="table table-bordered" style="width: 100%;"> <tbody> <tr> <td> item 1 </td> </tr> </tbody> </table> <table class="table table-bordered" style="width: 100%;"> <tbody> <tr> <td> item 2 </td> </tr> </tbody> </table> </div>';

// Use preg_replace_callback to isolate .pasted content first
$modifiedHtml = preg_replace_callback(
    '/(<div class="pasted">)(.*?)(<\/div>)/s',
    function($matches) {
        // Replace all tables inside the .pasted block
        return $matches[1] . preg_replace(
            '/(<table class="table table-bordered"[^>]*>)(.*?)(<\/table>)/s',
            '<div class="table-responsive"><table class="table table-bordered table-summernote1"$2$3</div>',
            $matches[2]
        ) . $matches[3];
    },
    $inputHtml
);

echo $modifiedHtml;

By first extracting the content inside .pasted, you ensure you only modify tables in the correct context, avoiding accidental nesting or outside table edits.

Key Takeaways #

• DOM is better for unpredictable HTML or when you need to handle edge cases (like nested elements or dynamic classes).
• Regex works if you're confident Summernote's output will stay consistent—just always scope your replacements to the specific container you care about.

内容的提问来源于stack exchange，提问作者Moin Uddin