JavaScript: Regexp to replace P with DIV

Question

我有一堆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>

我需要用divs 替换所有p，并为后者添加一个类

即：

• <p>变得<div class="myclass">
• <p style="...">变得<div class="myclass" style="...">

我几乎和<p.*?style="(.*?)">(.*?)</p>在一起，看到实时正则表达式，但它也匹配了两个段落，两者之间的代码，就像<p>Foo</p><div>bar...</div><p>baz</p>

谢谢

Answer 1

您应该避免使用正则表达式来操作 HTML，但由于这种情况有点不同并且不受嵌套标签的影响，因此可以在这种情况下完成。

您当前对.*?的用法是捕获任何字符，包括结束标记>，因此它总共捕获多个<p标记，这应该是无意的。

您需要稍微更改一下正则表达式，而不是像当前那样捕获，而是尝试这样做，

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

并用这个代替它，

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

在这里( style="[^>]*?")?部分使样式部分可选，这将允许它只匹配<p>标签以及属性标签，并且替换也将自动处理，就像没有匹配的 group1 一样，然后它将被替换为空字符串。

这样，它应该能够处理两种情况，简单的<p>标签以及<p style="something">情况，并且使用[^>]*?而不是.*?将避免它匹配超出其边界的段落标签。

试试这个演示

让我知道它是否适合您。

Answer 2

您可以在没有正则表达式的情况下执行此操作，使其比正则表达式更准确。您需要做的就是在内存中创建一个 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)

Answer 3

您可以使用此正则表达式来做到这一点：

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

所以，我将按(<p([^>]*?)>)匹配<p whatever>和<p>，将两者之间的任何薄匹配([^]*?)然后按(</p>)</p>

然后使用以下代码，您可以替换要<div class="myclass">的每个<p>以及要<div class="myclass"> styel=".."样式的每个<p style="..">

。

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