如何改變<p>標記文本，不刪除下划線或斜體格式？

Question

我有這種情況

"<p><strong><em><u>Allow Ship Partial</u></em></strong></p>"

我想更改<p>文本，但如果使用$('p').text('another text')它將刪除文本格式。

有什么方法可以在不丟失格式的情況下做到這一點？

Answer 1

發生這種情況是因為您正在用另一個文本替換 p 的內容，而該文本恰好是

<strong><em><u>Allow Ship Partial</u></em></strong></p>

所以你甚至要替換格式標簽。 你應該改用

$('p strong em u').text('another text')

甚至更好

 $('p>strong>em>u').text('another text')

Answer 2

您也可以使用 CSS 來設置樣式

標簽

它看起來像這樣

p {
    font-weight: bold;
    font-style: italic;
    text-decoration: underline;
}

Answer 3

使用parentNode p的父節點，遍歷子節點並將它們附加到parent ，然后刪除原始節點。

    while(c.hasChildNodes()) p.appendChild(c.firstChild);
    p.removeChild(c);

 let c = document.querySelector("p"), p = c.parentNode; while(c.hasChildNodes()) p.appendChild(c.firstChild); p.removeChild(c);

 <p><strong><em>Hi</em></strong></p>

Answer 4

如果您的結構始終得到保證（我不相信），其他答案可能會解決您的問題，但您可以改為遞歸迭代子節點，直到找到文本節點。 完成后，替換內聯文本。

 function findTextElement(element) { for (let i = 0, n = element.childNodes.length; i < n; i++) { const child = element.childNodes[i]; if (child.nodeType !==3) { return findTextElement(child); } return child; } } const ps = document.querySelectorAll('p'); [].forEach.call(ps, (node, i) => { const textElement = findTextElement(node); textElement.parentNode.innerHTML = `New String ${i + 1} retains formatting`; });

 <p><strong><em><u>Allow Ship Partial 1</u></em></strong></p> <p><em><strong>Allow Ship Partial 2</strong></em></p> <p><u>Allow Ship Partial 3</u></p> <p>Allow Ship Partial 4</p>

注意這個例子只是第一遍； 您最有可能需要檢查邊緣情況（例如是否找到文本節點等）。 我也沒有使用 jQuery，因為大多數 jQuery 方法不包含文本節點。 如果您更喜歡該路由，您可以使用jQuery.contents()對其進行重構，在每次迭代時過濾掉非文本節點。