0

I have this bunch of HTML code:

<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>

I need to replace all ps with divs, adding a class to the latter

I.e.:

  • <p> becomes <div class="myclass">
  • <p style="..."> becomes <div class="myclass" style="...">

I am almost there with <p.*?style="(.*?)">(.*?)<\/p>, see the live regex, but it matches also two paragraphs with code between the twos, like <p>Foo</p><div>bar...</div><p>baz</p>

Thanks

Ivan
  • 2,463
  • 6
  • 39
  • 51
  • 2
    https://stackoverflow.com/a/1732454/1267304 – DontVoteMeDown Jan 31 '19 at 16:55
  • 1
    Where's the javascript you're using to do this? Is it supposed to run when the page loads? If so, just manipulate the DOM: https://plainjs.com/javascript/manipulation/ https://www.sitepoint.com/dom-manipulation-vanilla-javascript-no-jquery/ etc – jhnc Jan 31 '19 at 17:01

3 Answers3

1

You should avoid using Regex for manipulating HTML but since this case is a bit different and is immune to nested tags, it can be done in this case.

Your current usage of .*? is capturing any character including ending tag > due to which it captures multiple <p tags altogether which should be unintended.

You need to change your regex a bit and instead of capturing like your current way, try doing it this way,

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

And replace it with this,

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

Here ( style="[^>]*?")? part makes the style part optional which will allow it to match just <p> tag as well in addition to attributed one and replacement will also be automatically be taken care as if there is no group1 matched, then it will be replaced with empty string.

This way, it should be able to handle both the cases, simple <p> tag as well as <p style="something"> case too and with usage of [^>]*? instead of .*? will avoid it matching paragraph tag beyond its boundary.

Try this demo

And let me know if it works well for you.

Pushpesh Kumar Rajwanshi
  • 18,127
  • 2
  • 19
  • 36
0

You can do this without regex, making it more accurate that RegExp. All you need to do is make an in memory DOM and replace the data.

Once you have replaced everything, you can use .innerHTML to get the html of the in memory dom.

The javascript looks like this:

// 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)

Here is a working example:

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)
Get Off My Lawn
  • 34,175
  • 38
  • 176
  • 338
0

You can do it using this Regex :

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

So , i will match <p whatever> and <p> by (<p([^>]*?)>) and any thin in between by ([^\]*?) then </p> by (<\/p>)

Then with the following code you could be able to replace every <p> to <div class="myclass"> and also every <p style=".."> to <div class="myclass"> styel=".." the style will be as is .

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);
Mohammed Elhag
  • 4,272
  • 1
  • 10
  • 18