JavaScript:Regexp将DI替换为P

时间:2019-01-31 16:53:30

标签: javascript regex replace

我有一堆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替换所有div,向后者添加一个类

即:

  • <p>成为<div class="myclass">
  • <p style="...">成为<div class="myclass" style="...">

我几乎可以和<p.*?style="(.*?)">(.*?)<\/p>在一起了,请参阅the live regex,但是它也匹配两个段落,两者之间都有代码,例如<p>Foo</p><div>bar...</div><p>baz</p>

谢谢

3 个答案:

答案 0 :(得分:1)

您应该避免使用正则表达式来处理HTML,但是由于这种情况有些不同并且不受嵌套标记的影响,因此可以在这种情况下完成。

您目前 Option Compare Text 'this tells VBA that you want you string comparisons to NOT be 'case sesitive. If you want case to be taken into account, then leave 'this line out. Sub test() Dim cll As Range Dim vCellValue As Variant Dim iterator As Integer Dim vCountBlank As Integer Dim vCountCr As Integer Dim vCountNr As Integer Dim wb2 As Workbook Set wb2 = Workbooks.Add For Each cll In Sheet1.Range("B2:B901") vCountBlank = 0 vCountCr = 0 vCountNr = 0 If cll.Value = "Dr" Then For iterator = 1 To 5 vCellValue = cll.Offset(iterator, 0).Value If vCellValue = "Nr" Then vCountNr = vCountNr + 1 If vCellValue = "Cr" Then vCountCr = vCountCr + 1 If vCellValue = "" Then vCountBlank = vCountBlank + 1 Next iterator End If wb2.Sheets(1).Cells(cll.Row, 1).Value = cll.Offset(0, -1).Value wb2.Sheets(1).Cells(cll.Row, 2).Value = cll.Value wb2.Sheets(1).Cells(cll.Row, 3).Value = vCountNr wb2.Sheets(1).Cells(cll.Row, 4).Value = vCountCr wb2.Sheets(1).Cells(cll.Row, 5).Value = vCountBlank Next cll Set wb2 = Nothing End Sub 的用法是捕获包括结束标签.*?在内的任何字符,因此它会捕获多个>标签,这些标签本来是不希望的。

您需要稍微更改正则表达式,而不是像现在那样捕获,请尝试以这种方式进行

<p

并替换为此,

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

这里<div class="myclass"$1>$2</div> 部分使样式部分成为可选部分,这将使其不仅与属性标签匹配,还与( style="[^>]*?")?标签匹配,并且替换也将自动进行,就好像没有group1匹配,则将其替换为空字符串。

通过这种方式,它应该能够同时处理简单的<p>标签和<p>两种情况,并且使用<p style="something">而不是[^>]*?避免使其与段落标签超出其边界相匹配。

Try this demo

让我知道它是否适合您。

答案 1 :(得分:0)

您可以在不使用正则表达式的情况下执行此操作,从而使其比RegExp更准确。您要做的就是创建一个内存DOM并替换数据。

替换完所有内容后,可以使用.innerHTML获取内存dom的html。

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)

答案 2 :(得分:0)

您可以使用此Regex来实现:

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