JavaScript: регулярное выражение для замены P на DIV - PullRequest
Новая
       12

JavaScript: регулярное выражение для замены P на DIV

0 голосов
/ 31 января 2019

У меня есть эта связка HTML-кода: 

<div style="background-color: #ecedef; padding: 1em 0px;">
    <table border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px; margin: 0 auto;">
        <tbody>
            <tr>
                <td>
                    <div class="elementEditable secEdit" style="background-color:#fff;">
                        <table class="tableMail" border="0" cellpadding="0" cellspacing="0" style="width:100%;max-width:600px;margin: 0 auto;">
                            <tbody>
                                <tr>
                                    <td style="width: 25%;">&nbsp;</td>
                                    <td class="cellLogoCustom" style="padding:30px;text-align:center;position:relative;">
                                        <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSgBBwcHCggKEwoKEygaFhooKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKP/AABEIAAoAGQMBEQACEQEDEQH/xAGiAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgsQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+gEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/2gAMAwEAAhEDEQA/APqmgAoAKAPzW+LH/JU/GX/Yavf/AEe9AHVf8NB/E/8A6Gb/AMkLX/43QAf8NB/E/wD6Gb/yQtf/AI3QAf8ADQfxP/6Gb/yQtf8A43QB5rq2oXWr6realqEvnXt5M9xPJtC75HYsxwAAMkngDFAH/9k=" style="
                                             max-width: 250px;
                                             ">
                                    </td>
                                    <td style="width: 25%;">&nbsp;</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="elementEditable secEdit" style="color: rgb(255, 255, 255); background-color: rgb(0, 115, 182); font-family: Arial; text-align: center; font-weight: normal; font-style: normal; font-size: 15px;">
                        <table class="tableMail" border="0" cellpadding="0" cellspacing="0" style="width:100%; max-width:600px; margin: 0 auto;">
                            <tbody>
                                <tr>
                                    <td style="padding:30px;text-align:center;">
                                        <p style="font-weight: lighter; text-align: center; background-color: rgb(0, 115, 182); color: rgb(255, 255, 255); font-family: Arial; font-size: 15px;">
                                            Ordine completato!</p>
                                    </td>
                                </tr>
                            </tbody>
                        </table>

                    </div>

                    <div class="elementEditable secEdit" style="background: rgb(255, 255, 255); color: rgb(51, 51, 51); font-family: Arial; font-weight: lighter; font-size: 14px;">
                        <table class="tableMail" border="0" cellpadding="0" cellspacing="0" style="width:100%; max-width:600px; margin: 0 auto;">
                            <tbody>
                                <tr>
                                    <td style="padding:40px 30px 40px 30px;">
                                        <p style="font-weight: lighter; color: rgb(51, 51, 51); font-family: Arial; font-size: 14px;">
                                            Il tuo ordine (#%order_id%) è stato ricevuto ed è in elaborazione.<br>
                                            Il dettaglio dell'ordine è mostrato di seguito perché possa consultarlo:
                                        </p>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="elementEditable std tabEdit" style="font-family: Arial; background-color: rgb(255, 255, 255); font-size: 13px;">
                        <table class="tableMail" border="0" cellpadding="0" cellspacing="0" style="width:100%;max-width:600px;margin: 0 auto;">
                            <tbody>
                                <tr style="">
                                    <td style="padding: 30px; border-color: rgb(236, 237, 239); color: rgb(51, 51, 51);">
                                        <table cellspacing="0" cellpadding="6" style="width:100%;border: 1px solid #eee;">
                                            <thead>
                                                <tr>
                                                    <th scope="col" style="text-align: left; border: 1px solid rgb(236, 237, 239); padding: 12px; color: rgb(51, 51, 51);">
                                            <p>Prodotto</p>
                                            </th>
                                            <th scope="col" style="text-align: left; border: 1px solid rgb(236, 237, 239); padding: 12px; color: rgb(51, 51, 51);">
                                            <p>Quantità</p>
                                            </th>
                                            <th scope="col" style="text-align: left; border: 1px solid rgb(236, 237, 239); padding: 12px; color: rgb(51, 51, 51);">
                                            <p>Prezzo</p>
                                            </th>
                                </tr>
                                </thead>
                            <tbody>
                                <!-- product list -->
                                <tr>
                                    <td style="text-align: left; vertical-align: middle; border: 1px solid rgb(236, 237, 239); word-wrap: break-word; padding: 12px; color: rgb(51, 51, 51);">Prodotto 1</td>
                                    <td style="text-align: left; vertical-align: middle; border: 1px solid rgb(236, 237, 239); padding: 12px; color: rgb(51, 51, 51);">1</td>
                                    <td style="text-align: left; vertical-align: middle; border: 1px solid rgb(236, 237, 239); padding: 12px; color: rgb(51, 51, 51);">EUR 12.50</td>
                                </tr>
                                <!-- product list -->
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th scope="row" colspan="2" style="text-align: left; border: 1px solid rgb(236, 237, 239); padding: 12px; color: rgb(51, 51, 51);">
                            <p>Subtotale:</p>
                            </th>
                            <td style="text-align: left; border: 1px solid rgb(236, 237, 239); padding: 12px; color: rgb(51, 51, 51);"><span>%curr% %order_subtotal%</span></td>
                            </tr>
                            <tr>
                                <th scope="row" colspan="2" style="text-align: left; border: 1px solid rgb(236, 237, 239); padding: 12px; color: rgb(51, 51, 51);">
                            <p>Spedizione:</p>
                            </th>
                            <td style="text-align: left; border: 1px solid rgb(236, 237, 239); padding: 12px; color: rgb(51, 51, 51);">
                                <span>%curr% %order_shipprice%</span>
                            </td>
                            </tr>
                            <tr>
                                <th scope="row" colspan="2" style="text-align: left; border: 1px solid rgb(236, 237, 239); padding: 12px; color: rgb(51, 51, 51);">
                            <p>Totale:</p>
                            </th>
                            <td style="text-align: left; border: 1px solid rgb(236, 237, 239); padding: 12px; color: rgb(51, 51, 51);">
                                <span>%curr% %order_total%</span>
                            </td>
                            </tr>
                            </tfoot>
                        </table>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<div class="elementEditable headEdit">
    <table class="tableMail" border="0" cellpadding="0" cellspacing="0" style="width:100%; max-width:600px; margin: 0 auto; background: #ccc;">
        <tbody>
            <tr style="background:#fff;">
                <th style="padding:10px 30px 0px 30px; color: #555; font-weight: bolder;text-align:left;">
        <p>Note:</p>
        </th>
        </tr>
        <tr style="background:#fff;">
            <td style="padding:16px 30px 60px 30px;  color: #666; font-weight: lighter; lin-height:1.3;text-align:left;">
                %order_note%
            </td>
        </tr>
        </tbody>
    </table>
</div>
<div class="elementEditable headEdit" style="background-color: rgb(255, 255, 255); font-size: 13px;">
    <table class="tableMail" border="0" cellpadding="0" cellspacing="0" style="width:100%;max-width:600px;margin: 0 auto;">
        <tbody>
            <tr style="">
                <th style="padding: 10px 30px 0px; color: rgb(51, 51, 51); font-weight: bolder;">
        <p>Dettaglio:</p>
        </th>
        </tr>
        <tr style="">
            <td style="padding: 16px 30px 60px; color: rgb(51, 51, 51); font-weight: lighter; line-height: 1.6;">
                %buyer_name%
                <br>
                Email: %buyer_email%
                <br>
                Tel: %buyer_phone%
            </td>
        </tr>
        </tbody>
    </table>
</div>
<div class="elementEditable std headEdit" style="font-family: Arial; font-size: 13px; background-color: rgb(255, 255, 255);">
    <table class="tableMail" border="0" cellpadding="0" cellspacing="0" style="width:100%;max-width:600px;margin: 0 auto;">
        <tbody>
            <tr>
                <td style="color: rgb(51, 51, 51);">
                    <table class="tableMail" align="left" border="0" cellpadding="0" cellspacing="0" style="max-width:300px;margin: 0 auto;">
                        <tbody>
                            <tr style="">
                                <th style="padding: 10px 30px 0px; color: rgb(51, 51, 51); font-weight: bolder;text-align:left;">
                        <p>Indirizzo fatturazione:</p>
                        </th>
            </tr>
            <tr style="">
                <td style="padding: 16px 30px 80px; color: rgb(51, 51, 51); font-weight: lighter; line-height: 1.6;">
                    %invoice_name%
                    <br>
                    %invoice_fiscal%
                    <br>
                    %invoice_address% - %invoice_zip%
                    <br>%invoice_city% (%invoice_state%)
                    <br>%invoice_country%
                    <br>
                    Email: %invoice_email%
                    <br>
                    Tel: %invoice_phone%
                </td>
            </tr>
        </tbody>
    </table>

    <table class="tableMail" align="right" border="0" cellpadding="0" cellspacing="0" style="max-width:300px;margin: 0 auto;">
        <tbody>
            <tr style="">
                <th style="padding: 10px 30px 0px; color: rgb(51, 51, 51); font-weight: bolder;text-align:left;">
        <p>Indirizzo spedizione:</p>
        </th>
        </tr>
        <tr style="">
            <td style="padding: 16px 30px 80px; font-weight: lighter; line-height: 1.6; color: rgb(51, 51, 51);">
                %shipping_name%
                <br>
                %shipping_fiscal%
                <br>
                %shipping_address% - %shipping_zip%
                <br>%shipping_city% (%shipping_state%)
                <br>%shipping_country%
                <br>
                Email: %shipping_email%
            </td>
        </tr>
        </tbody>
    </table>
</td>
</tr>
</tbody>
</table>
</div>

<div class="elementEditable secEdit" style="background-color: rgb(0, 115, 182); font-size: 12px; color: rgb(255, 255, 255); font-family: Arial; text-align: center; font-weight: lighter; font-style: italic;">
    <table class="tableMail" border="0" cellpadding="0" cellspacing="0" style="width:100%;max-width:600px;margin: 0 auto;">
        <tbody>
            <tr style="">
                <td style="padding:20px 30px;text-align:center;">
                    <p style="font-weight: lighter; font-family: Arial; text-align: center; font-style: italic;">%shop_name%</p>
                </td>
            </tr>
        </tbody>
    </table>
</div>
</td>
</tr>
</tbody>
</table>
</div>

Мне нужно заменить все p s на div s, добавив класс к последнему

Т.е.:

  • <p> становится <div class="myclass">
  • <p style="..."> становится <div class="myclass" style="...">

Я почти там с <p.*?style="(.*?)">(.*?)<\/p>, см. живое регулярное выражение , но оно также соответствует двум параграфам с кодом между двумя, как <p>Foo</p><div>bar...</div><p>baz</p>

Спасибо

Ответы [ 3 ]

0 голосов
/ 31 января 2019

Вы можете сделать это без регулярных выражений, что делает его более точным, чем RegExp.Все, что вам нужно сделать, это создать DOM в памяти и заменить данные.

После того, как вы заменили все, вы можете использовать .innerHTML, чтобы получить html в памяти dom.

JavaScript выглядит так: 

// Create a root element to work off of
let fragment = document.createElement('root')
// Add the HTML to the element
fragment.innerHTML = data

// Find all the paragraph tags and iterate over each
Array.from(fragment.querySelectorAll('p')).forEach(item => {
  // Create the new div
  let newEl = document.createElement('div')

  // Add your classes
  newEl.classList.add('myclass')

  // Apply the attributes from the original
  for(let attr of item.attributes) {
    newEl.setAttribute(attr.name, attr.value)
  }

  // Add the innerHTML data
  newEl.innerHTML = item.innerHTML

  // Replace the original node with the new node
  item.parentNode.replaceChild(newEl, item)
})

console.log(fragment.innerHTML)

Вот рабочий пример: 

let data = `<div style="background-color: #ecedef; padding: 1em 0px;">
    <table border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px; margin: 0 auto;">
        <tbody>
            <tr>
                <td>
                    <div class="elementEditable secEdit" style="background-color:#fff;">
                        <table class="tableMail" border="0" cellpadding="0" cellspacing="0" style="width:100%;max-width:600px;margin: 0 auto;">
                            <tbody>
                                <tr>
                                    <td style="width: 25%;">&nbsp;</td>
                                    <td class="cellLogoCustom" style="padding:30px;text-align:center;position:relative;">
                                        <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSgBBwcHCggKEwoKEygaFhooKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKP/AABEIAAoAGQMBEQACEQEDEQH/xAGiAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgsQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+gEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/2gAMAwEAAhEDEQA/APqmgAoAKAPzW+LH/JU/GX/Yavf/AEe9AHVf8NB/E/8A6Gb/AMkLX/43QAf8NB/E/wD6Gb/yQtf/AI3QAf8ADQfxP/6Gb/yQtf8A43QB5rq2oXWr6realqEvnXt5M9xPJtC75HYsxwAAMkngDFAH/9k=" style="
                                             max-width: 250px;
                                             ">
                                    </td>
                                    <td style="width: 25%;">&nbsp;</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="elementEditable secEdit" style="color: rgb(255, 255, 255); background-color: rgb(0, 115, 182); font-family: Arial; text-align: center; font-weight: normal; font-style: normal; font-size: 15px;">
                        <table class="tableMail" border="0" cellpadding="0" cellspacing="0" style="width:100%; max-width:600px; margin: 0 auto;">
                            <tbody>
                                <tr>
                                    <td style="padding:30px;text-align:center;">
                                        <p style="font-weight: lighter; text-align: center; background-color: rgb(0, 115, 182); color: rgb(255, 255, 255); font-family: Arial; font-size: 15px;">
                                            Ordine completato!</p>
                                    </td>
                                </tr>
                            </tbody>
                        </table>

                    </div>

                    <div class="elementEditable secEdit" style="background: rgb(255, 255, 255); color: rgb(51, 51, 51); font-family: Arial; font-weight: lighter; font-size: 14px;">
                        <table class="tableMail" border="0" cellpadding="0" cellspacing="0" style="width:100%; max-width:600px; margin: 0 auto;">
                            <tbody>
                                <tr>
                                    <td style="padding:40px 30px 40px 30px;">
                                        <p style="font-weight: lighter; color: rgb(51, 51, 51); font-family: Arial; font-size: 14px;">
                                            Il tuo ordine (#%order_id%) è stato ricevuto ed è in elaborazione.<br>
                                            Il dettaglio dell'ordine è mostrato di seguito perché possa consultarlo:
                                        </p>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="elementEditable std tabEdit" style="font-family: Arial; background-color: rgb(255, 255, 255); font-size: 13px;">
                        <table class="tableMail" border="0" cellpadding="0" cellspacing="0" style="width:100%;max-width:600px;margin: 0 auto;">
                            <tbody>
                                <tr style="">
                                    <td style="padding: 30px; border-color: rgb(236, 237, 239); color: rgb(51, 51, 51);">
                                        <table cellspacing="0" cellpadding="6" style="width:100%;border: 1px solid #eee;">
                                            <thead>
                                                <tr>
                                                    <th scope="col" style="text-align: left; border: 1px solid rgb(236, 237, 239); padding: 12px; color: rgb(51, 51, 51);">
                                            <p>Prodotto</p>
                                            </th>
                                            <th scope="col" style="text-align: left; border: 1px solid rgb(236, 237, 239); padding: 12px; color: rgb(51, 51, 51);">
                                            <p>Quantità</p>
                                            </th>
                                            <th scope="col" style="text-align: left; border: 1px solid rgb(236, 237, 239); padding: 12px; color: rgb(51, 51, 51);">
                                            <p>Prezzo</p>
                                            </th>
                                </tr>
                                </thead>
                            <tbody>
                                <!-- product list -->
                                <tr>
                                    <td style="text-align: left; vertical-align: middle; border: 1px solid rgb(236, 237, 239); word-wrap: break-word; padding: 12px; color: rgb(51, 51, 51);">Prodotto 1</td>
                                    <td style="text-align: left; vertical-align: middle; border: 1px solid rgb(236, 237, 239); padding: 12px; color: rgb(51, 51, 51);">1</td>
                                    <td style="text-align: left; vertical-align: middle; border: 1px solid rgb(236, 237, 239); padding: 12px; color: rgb(51, 51, 51);">EUR 12.50</td>
                                </tr>
                                <!-- product list -->
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th scope="row" colspan="2" style="text-align: left; border: 1px solid rgb(236, 237, 239); padding: 12px; color: rgb(51, 51, 51);">
                            <p>Subtotale:</p>
                            </th>
                            <td style="text-align: left; border: 1px solid rgb(236, 237, 239); padding: 12px; color: rgb(51, 51, 51);"><span>%curr% %order_subtotal%</span></td>
                            </tr>
                            <tr>
                                <th scope="row" colspan="2" style="text-align: left; border: 1px solid rgb(236, 237, 239); padding: 12px; color: rgb(51, 51, 51);">
                            <p>Spedizione:</p>
                            </th>
                            <td style="text-align: left; border: 1px solid rgb(236, 237, 239); padding: 12px; color: rgb(51, 51, 51);">
                                <span>%curr% %order_shipprice%</span>
                            </td>
                            </tr>
                            <tr>
                                <th scope="row" colspan="2" style="text-align: left; border: 1px solid rgb(236, 237, 239); padding: 12px; color: rgb(51, 51, 51);">
                            <p>Totale:</p>
                            </th>
                            <td style="text-align: left; border: 1px solid rgb(236, 237, 239); padding: 12px; color: rgb(51, 51, 51);">
                                <span>%curr% %order_total%</span>
                            </td>
                            </tr>
                            </tfoot>
                        </table>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<div class="elementEditable headEdit">
    <table class="tableMail" border="0" cellpadding="0" cellspacing="0" style="width:100%; max-width:600px; margin: 0 auto; background: #ccc;">
        <tbody>
            <tr style="background:#fff;">
                <th style="padding:10px 30px 0px 30px; color: #555; font-weight: bolder;text-align:left;">
        <p>Note:</p>
        </th>
        </tr>
        <tr style="background:#fff;">
            <td style="padding:16px 30px 60px 30px;  color: #666; font-weight: lighter; lin-height:1.3;text-align:left;">
                %order_note%
            </td>
        </tr>
        </tbody>
    </table>
</div>
<div class="elementEditable headEdit" style="background-color: rgb(255, 255, 255); font-size: 13px;">
    <table class="tableMail" border="0" cellpadding="0" cellspacing="0" style="width:100%;max-width:600px;margin: 0 auto;">
        <tbody>
            <tr style="">
                <th style="padding: 10px 30px 0px; color: rgb(51, 51, 51); font-weight: bolder;">
        <p>Dettaglio:</p>
        </th>
        </tr>
        <tr style="">
            <td style="padding: 16px 30px 60px; color: rgb(51, 51, 51); font-weight: lighter; line-height: 1.6;">
                %buyer_name%
                <br>
                Email: %buyer_email%
                <br>
                Tel: %buyer_phone%
            </td>
        </tr>
        </tbody>
    </table>
</div>
<div class="elementEditable std headEdit" style="font-family: Arial; font-size: 13px; background-color: rgb(255, 255, 255);">
    <table class="tableMail" border="0" cellpadding="0" cellspacing="0" style="width:100%;max-width:600px;margin: 0 auto;">
        <tbody>
            <tr>
                <td style="color: rgb(51, 51, 51);">
                    <table class="tableMail" align="left" border="0" cellpadding="0" cellspacing="0" style="max-width:300px;margin: 0 auto;">
                        <tbody>
                            <tr style="">
                                <th style="padding: 10px 30px 0px; color: rgb(51, 51, 51); font-weight: bolder;text-align:left;">
                        <p>Indirizzo fatturazione:</p>
                        </th>
            </tr>
            <tr style="">
                <td style="padding: 16px 30px 80px; color: rgb(51, 51, 51); font-weight: lighter; line-height: 1.6;">
                    %invoice_name%
                    <br>
                    %invoice_fiscal%
                    <br>
                    %invoice_address% - %invoice_zip%
                    <br>%invoice_city% (%invoice_state%)
                    <br>%invoice_country%
                    <br>
                    Email: %invoice_email%
                    <br>
                    Tel: %invoice_phone%
                </td>
            </tr>
        </tbody>
    </table>

    <table class="tableMail" align="right" border="0" cellpadding="0" cellspacing="0" style="max-width:300px;margin: 0 auto;">
        <tbody>
            <tr style="">
                <th style="padding: 10px 30px 0px; color: rgb(51, 51, 51); font-weight: bolder;text-align:left;">
        <p>Indirizzo spedizione:</p>
        </th>
        </tr>
        <tr style="">
            <td style="padding: 16px 30px 80px; font-weight: lighter; line-height: 1.6; color: rgb(51, 51, 51);">
                %shipping_name%
                <br>
                %shipping_fiscal%
                <br>
                %shipping_address% - %shipping_zip%
                <br>%shipping_city% (%shipping_state%)
                <br>%shipping_country%
                <br>
                Email: %shipping_email%
            </td>
        </tr>
        </tbody>
    </table>
</td>
</tr>
</tbody>
</table>
</div>

<div class="elementEditable secEdit" style="background-color: rgb(0, 115, 182); font-size: 12px; color: rgb(255, 255, 255); font-family: Arial; text-align: center; font-weight: lighter; font-style: italic;">
    <table class="tableMail" border="0" cellpadding="0" cellspacing="0" style="width:100%;max-width:600px;margin: 0 auto;">
        <tbody>
            <tr style="">
                <td style="padding:20px 30px;text-align:center;">
                    <p style="font-weight: lighter; font-family: Arial; text-align: center; font-style: italic;">%shop_name%</p>
                </td>
            </tr>
        </tbody>
    </table>
</div>
</td>
</tr>
</tbody>
</table>
</div>`


let fragment = document.createElement('root')
fragment.innerHTML = data

Array.from(fragment.querySelectorAll('p')).forEach(item => {
  let newEl = document.createElement('div')
  newEl.classList.add('myclass')
  for(let attr of item.attributes) {
    newEl.setAttribute(attr.name, attr.value)
  }
  newEl.innerHTML = item.innerHTML
  item.parentNode.replaceChild(newEl, item)
})

console.log(fragment.innerHTML)
0 голосов
/ 01 февраля 2019

Вы можете сделать это с помощью этого регулярного выражения: 

(<p([^>]*?)>)([^\]*?)(<\/p>)

Итак, я сопоставлю <p whatever> и <p> по (<p([^>]*?)>) и любой тонкий между ([^\]*?), а затем </p> по(<\/p>)

Тогда с помощью следующего кода вы сможете заменить каждый <p> на <div class="myclass">, а также каждый <p style=".."> на <div class="myclass"> styel=".." стиль будет таким, как есть. 

var all =`<div style="background-color: #ecedef; padding: 1em 0px;">
    <table border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px; margin: 0 auto;">
        <tbody>
            <tr>
                <td>
                    <div class="elementEditable secEdit" style="background-color:#fff;">
                        <table class="tableMail" border="0" cellpadding="0" cellspacing="0" style="width:100%;max-width:600px;margin: 0 auto;">
                            <tbody>
                                <tr>
                                    <td style="width: 25%;">&nbsp;</td>
                                    <td class="cellLogoCustom" style="padding:30px;text-align:center;position:relative;">
                                        <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSgBBwcHCggKEwoKEygaFhooKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKP/AABEIAAoAGQMBEQACEQEDEQH/xAGiAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgsQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+gEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/2gAMAwEAAhEDEQA/APqmgAoAKAPzW+LH/JU/GX/Yavf/AEe9AHVf8NB/E/8A6Gb/AMkLX/43QAf8NB/E/wD6Gb/yQtf/AI3QAf8ADQfxP/6Gb/yQtf8A43QB5rq2oXWr6realqEvnXt5M9xPJtC75HYsxwAAMkngDFAH/9k=" style="
                                             max-width: 250px;
                                             ">
                                    </td>
                                    <td style="width: 25%;">&nbsp;</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="elementEditable secEdit" style="color: rgb(255, 255, 255); background-color: rgb(0, 115, 182); font-family: Arial; text-align: center; font-weight: normal; font-style: normal; font-size: 15px;">
                        <table class="tableMail" border="0" cellpadding="0" cellspacing="0" style="width:100%; max-width:600px; margin: 0 auto;">
                            <tbody>
                                <tr>
                                    <td style="padding:30px;text-align:center;">
                                        <p style="font-weight: lighter; text-align: center; background-color: rgb(0, 115, 182); color: rgb(255, 255, 255); font-family: Arial; font-size: 15px;">
                                            Ordine completato!</p>
                                    </td>
                                </tr>
                            </tbody>
                        </table>

                    </div>

                    <div class="elementEditable secEdit" style="background: rgb(255, 255, 255); color: rgb(51, 51, 51); font-family: Arial; font-weight: lighter; font-size: 14px;">
                        <table class="tableMail" border="0" cellpadding="0" cellspacing="0" style="width:100%; max-width:600px; margin: 0 auto;">
                            <tbody>
                                <tr>
                                    <td style="padding:40px 30px 40px 30px;">
                                        <p style="font-weight: lighter; color: rgb(51, 51, 51); font-family: Arial; font-size: 14px;">
                                            Il tuo ordine (#%order_id%) è stato ricevuto ed è in elaborazione.<br>
                                            Il dettaglio dell'ordine è mostrato di seguito perché possa consultarlo:
                                        </p>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="elementEditable std tabEdit" style="font-family: Arial; background-color: rgb(255, 255, 255); font-size: 13px;">
                        <table class="tableMail" border="0" cellpadding="0" cellspacing="0" style="width:100%;max-width:600px;margin: 0 auto;">
                            <tbody>
                                <tr style="">
                                    <td style="padding: 30px; border-color: rgb(236, 237, 239); color: rgb(51, 51, 51);">
                                        <table cellspacing="0" cellpadding="6" style="width:100%;border: 1px solid #eee;">
                                            <thead>
                                                <tr>
                                                    <th scope="col" style="text-align: left; border: 1px solid rgb(236, 237, 239); padding: 12px; color: rgb(51, 51, 51);">
                                            <p>Prodotto</p>
                                            </th>
                                            <th scope="col" style="text-align: left; border: 1px solid rgb(236, 237, 239); padding: 12px; color: rgb(51, 51, 51);">
                                            <p>Quantità</p>
                                            </th>
                                            <th scope="col" style="text-align: left; border: 1px solid rgb(236, 237, 239); padding: 12px; color: rgb(51, 51, 51);">
                                            <p>Prezzo</p>
                                            </th>
                                </tr>
                                </thead>
                            <tbody>
                                <!-- product list -->
                                <tr>
                                    <td style="text-align: left; vertical-align: middle; border: 1px solid rgb(236, 237, 239); word-wrap: break-word; padding: 12px; color: rgb(51, 51, 51);">Prodotto 1</td>
                                    <td style="text-align: left; vertical-align: middle; border: 1px solid rgb(236, 237, 239); padding: 12px; color: rgb(51, 51, 51);">1</td>
                                    <td style="text-align: left; vertical-align: middle; border: 1px solid rgb(236, 237, 239); padding: 12px; color: rgb(51, 51, 51);">EUR 12.50</td>
                                </tr>
                                <!-- product list -->
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th scope="row" colspan="2" style="text-align: left; border: 1px solid rgb(236, 237, 239); padding: 12px; color: rgb(51, 51, 51);">
                            <p>Subtotale:</p>
                            </th>
                            <td style="text-align: left; border: 1px solid rgb(236, 237, 239); padding: 12px; color: rgb(51, 51, 51);"><span>%curr% %order_subtotal%</span></td>
                            </tr>
                            <tr>
                                <th scope="row" colspan="2" style="text-align: left; border: 1px solid rgb(236, 237, 239); padding: 12px; color: rgb(51, 51, 51);">
                            <p>Spedizione:</p>
                            </th>
                            <td style="text-align: left; border: 1px solid rgb(236, 237, 239); padding: 12px; color: rgb(51, 51, 51);">
                                <span>%curr% %order_shipprice%</span>
                            </td>
                            </tr>
                            <tr>
                                <th scope="row" colspan="2" style="text-align: left; border: 1px solid rgb(236, 237, 239); padding: 12px; color: rgb(51, 51, 51);">
                            <p>Totale:</p>
                            </th>
                            <td style="text-align: left; border: 1px solid rgb(236, 237, 239); padding: 12px; color: rgb(51, 51, 51);">
                                <span>%curr% %order_total%</span>
                            </td>
                            </tr>
                            </tfoot>
                        </table>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<div class="elementEditable headEdit">
    <table class="tableMail" border="0" cellpadding="0" cellspacing="0" style="width:100%; max-width:600px; margin: 0 auto; background: #ccc;">
        <tbody>
            <tr style="background:#fff;">
                <th style="padding:10px 30px 0px 30px; color: #555; font-weight: bolder;text-align:left;">
        <p>Note:</p>
        </th>
        </tr>
        <tr style="background:#fff;">
            <td style="padding:16px 30px 60px 30px;  color: #666; font-weight: lighter; lin-height:1.3;text-align:left;">
                %order_note%
            </td>
        </tr>
        </tbody>
    </table>
</div>
<div class="elementEditable headEdit" style="background-color: rgb(255, 255, 255); font-size: 13px;">
    <table class="tableMail" border="0" cellpadding="0" cellspacing="0" style="width:100%;max-width:600px;margin: 0 auto;">
        <tbody>
            <tr style="">
                <th style="padding: 10px 30px 0px; color: rgb(51, 51, 51); font-weight: bolder;">
        <p>Dettaglio:</p>
        </th>
        </tr>
        <tr style="">
            <td style="padding: 16px 30px 60px; color: rgb(51, 51, 51); font-weight: lighter; line-height: 1.6;">
                %buyer_name%
                <br>
                Email: %buyer_email%
                <br>
                Tel: %buyer_phone%
            </td>
        </tr>
        </tbody>
    </table>
</div>
<div class="elementEditable std headEdit" style="font-family: Arial; font-size: 13px; background-color: rgb(255, 255, 255);">
    <table class="tableMail" border="0" cellpadding="0" cellspacing="0" style="width:100%;max-width:600px;margin: 0 auto;">
        <tbody>
            <tr>
                <td style="color: rgb(51, 51, 51);">
                    <table class="tableMail" align="left" border="0" cellpadding="0" cellspacing="0" style="max-width:300px;margin: 0 auto;">
                        <tbody>
                            <tr style="">
                                <th style="padding: 10px 30px 0px; color: rgb(51, 51, 51); font-weight: bolder;text-align:left;">
                        <p>Indirizzo fatturazione:</p>
                        </th>
            </tr>
            <tr style="">
                <td style="padding: 16px 30px 80px; color: rgb(51, 51, 51); font-weight: lighter; line-height: 1.6;">
                    %invoice_name%
                    <br>
                    %invoice_fiscal%
                    <br>
                    %invoice_address% - %invoice_zip%
                    <br>%invoice_city% (%invoice_state%)
                    <br>%invoice_country%
                    <br>
                    Email: %invoice_email%
                    <br>
                    Tel: %invoice_phone%
                </td>
            </tr>
        </tbody>
    </table>

    <table class="tableMail" align="right" border="0" cellpadding="0" cellspacing="0" style="max-width:300px;margin: 0 auto;">
        <tbody>
            <tr style="">
                <th style="padding: 10px 30px 0px; color: rgb(51, 51, 51); font-weight: bolder;text-align:left;">
        <p>Indirizzo spedizione:</p>
        </th>
        </tr>
        <tr style="">
            <td style="padding: 16px 30px 80px; font-weight: lighter; line-height: 1.6; color: rgb(51, 51, 51);">
                %shipping_name%
                <br>
                %shipping_fiscal%
                <br>
                %shipping_address% - %shipping_zip%
                <br>%shipping_city% (%shipping_state%)
                <br>%shipping_country%
                <br>
                Email: %shipping_email%
            </td>
        </tr>
        </tbody>
    </table>
</td>
</tr>
</tbody>
</table>
</div>

<div class="elementEditable secEdit" style="background-color: rgb(0, 115, 182); font-size: 12px; color: rgb(255, 255, 255); font-family: Arial; text-align: center; font-weight: lighter; font-style: italic;">
    <table class="tableMail" border="0" cellpadding="0" cellspacing="0" style="width:100%;max-width:600px;margin: 0 auto;">
        <tbody>
            <tr style="">
                <td style="padding:20px 30px;text-align:center;">
                    <p style="font-weight: lighter; font-family: Arial; text-align: center; font-style: italic;">%shop_name%</p>
                </td>
            </tr>
        </tbody>
    </table>
</div>
</td>
</tr>
</tbody>
</table>
</div>`;

var res =all.replace( new RegExp("(<p([^>]*?)>)([^\]*?)(<\/p>)","gm"),"<div class='myclass' $2 >$3</div>");

console.log(res);
0 голосов
/ 31 января 2019

Вы должны избегать использования Regex для манипулирования HTML, но поскольку этот случай немного отличается и не защищен от вложенных тегов, это можно сделать в этом случае.

Ваше текущее использование .*? захватывает любыесимвол, включая конечный тег >, из-за чего он захватывает всего несколько тегов <p, которые должны быть непреднамеренными.

Вам нужно немного изменить свое регулярное выражение, и вместо того, чтобы захватывать, как ваш текущий способ, попробуйте сделать это следующим образом.Кстати, 

<p( style="[^>]*?")?>(.*?)<\/p>

И замените его следующим: 

<div class="myclass"$1>$2</div>

Здесь часть ( style="[^>]*?")? делает часть стиля необязательной, что позволит ей соответствовать только тегу <p> вдополнение к атрибутивному, и замена также будет автоматически выполняться, как если бы не было совпадения с group1, тогда она будет заменена пустой строкой.

Таким образом, он должен иметь возможность обрабатывать оба случая, простоТег <p>, а также регистр <p style="something"> и использование [^>]*? вместо .*? позволит избежать совпадения тега абзаца за его пределами.

Попробуйте эту демонстрацию

И дайте мне знать, если она вам подходит.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...