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

使用p获取parentNode的父节点，遍历子节点并将其附加到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()进行重构，从而在每次迭代中过滤掉非文本节点。

如何在不删除下划线或斜体格式的情况下更改<p>标签文本？

4 个答案: