यहां स्थिति है: मैं नेस्टेड डीआईवी तत्वों को टेबल तत्वों में बदलना चाहता हूं, मैं कक्षाओं को इनलाइन शैली के रूप में सेट करना चाहता हूं।

अब मेरे पास कक्षाओं और शैली विशेषताओं के साथ एक उदाहरण सरणी है:

$classes    = array(
            'container' => 'width: 100%;padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;',
            'card' => 'position: relative;display: -ms-flexbox;display: flex;-ms-flex-direction: column;flex-direction: column;min-width: 0;word-wrap: break-word;background-color: #fff;background-clip: border-box;border: 1px solid rgba(0, 0, 0, 0.125);border-radius: 0.25rem;',
        );

इस कोड को तब निम्नलिखित में परिवर्तित किया जाना है:

<div class="container">
    01
    <div class="card">
        02
    </div>
</div>

यह कोड तब से बनाया जाना है:

<table>
    <tr>
        <td class="container" style="width: 100%;padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;">
            01
            <table>
                <tr>
                    <td class="card" style="position: relative;display: -ms-flexbox;display: flex;-ms-flex-direction: column;flex-direction: column;min-width: 0;word-wrap: break-word;background-color: #fff;background-clip: border-box;border: 1px solid rgba(0, 0, 0, 0.125);border-radius: 0.25rem;">
                        02
                    </td>                
                </tr>
            </table>
        </td>
    </tr>
</table>

क्या किसी के पास कोई विचार है कि मैं ऐसा कुछ कैसे कर सकता हूं? मैं शुक्रवार से preg_replace_callback और DOMDocument के साथ प्रयोग कर रहा हूं। दुर्भाग्य से सफलता के बिना सब कुछ।

0
Norman Huth 14 जुलाई 2019, 13:28

1 उत्तर

सबसे बढ़िया उत्तर

कुछ खास नहीं है। आपको बस इतना ध्यान रखना है:

  • नोड्स को उल्टे क्रम में बदलने के लिए
  • बच्चों के नोड्स की एक गहरी प्रतिलिपि का उपयोग करने के लिए (DOMNode::cloneNode का उपयोग करके पैरामीटर सेट true के साथ)

मुझे लगता है कि आप एचटीएमएल के कुछ हिस्सों के साथ काम कर रहे हैं (<html> और <body> टैग के साथ एक पूर्ण दस्तावेज़ नहीं), लेकिन अगर ऐसा नहीं है तो आप आसानी से कोड को स्वयं बदल सकते हैं:

$cssClasses = [
    'container' => 'width: 100%;padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;',
    'card' => 'position: relative;display: -ms-flexbox;display: flex;-ms-flex-direction: column;flex-direction: column;min-width: 0;word-wrap: break-word;background-color: #fff;background-clip: border-box;border: 1px solid rgba(0, 0, 0, 0.125);border-radius: 0.25rem;'
];

$html = <<<'EOD'
<div class="container">
    01
    <div class="card">
        02
    </div>
</div>
EOD;

$dom = new DOMDocument;
$dom->loadHTML($html);

$divNL = $dom->getElementsByTagName('div');

for ($i = $divNL->length - 1; $i >= 0; $i--) {
    $node = $divNL->item($i);

    $table = $dom->createElement('table');
    $tr = $dom->createElement('tr');
    $td = $dom->createElement('td');
    $table->appendChild($tr);
    $tr->appendChild($td);

    foreach ($node->attributes as $attr) {
        $td->appendChild($attr);
    }

    $styles = array_reduce(
        preg_split('~\s+~u', $td->getAttribute('class')),
        function($c, $i) use ($cssClasses) {
            return isset($cssClasses[$i]) ? $cssClasses[$i] . $c : $c;
        },
        $td->getAttribute('style')
    );

    if ( !empty($styles) )
        $td->setAttribute('style', $styles);


    foreach ($node->childNodes as $childNode) {
        $td->appendChild($childNode->cloneNode(true));
    }

    $node->parentNode->replaceChild($table, $node);
}

$result = '';

foreach ($dom->getElementsByTagName('body')->item(0)->childNodes as $childNode) {
    $result .= $dom->saveHTML($childNode);
}

echo $result;

डेमो

1
Casimir et Hippolyte 14 जुलाई 2019, 23:01