如何將 HTML 元素（如“ ^X ”）替換為“（X）”等括號？

Question

我有像這樣的 HTML - BLAH BLAH BLAH BLAH BLAH BLAH <sup>x</sup> - 在<th>內。

我正在嘗試用(x)替換<sup>x</sup> 。

這些都是我嘗試過的不同方法。 insideSup是字母。

newText = $(tableRow).find("th").eq(tdIndex)
  .text().replace("<sup>(.*?)</sup>", " ") + "(" + insideSup + ")";

newText = $(tableRow).find("th").eq(tdIndex)
  .html().replace("<sup>(.*?)</sup>", " ") + "(" + insideSup + ")";

newText = $(tableRow).find("th").eq(tdIndex)
  .find("sup").html().replace("/<sup>/g", " ") + "(" + insideSup + ")";

newText = $(tableRow).find("th").eq(tdIndex)
  .find("sup").html().replace("<sup>(.*?)</sup>", " ") + "(" + insideSup + ")";

newText = $(tableRow).find("th").eq(tdIndex)
  .text().find("sup").html().replace("<sup>(.*?)</sup>", " ") + "(" + insideSup + ")";

Answer 1

您已經擁有可用的 DOM。 你根本不需要正則表達式。 只需使用replaceWith方法：

$(tableRow).find("th").eq(tdIndex).find("sup")
  .replaceWith((_index, textContent) => `(${textContent})`);

等效地，如果沒有 jQuery，假設tableRow是HTMLTableRowElement ，使用同名方法：

tableRow.querySelectorAll("th")[tdIndex].querySelectorAll("sup")
  .forEach((sup) => sup.replaceWith(`(${sup.textContent})`));

Answer 2

非常簡單，只需String.replace() ；

 let target = document.querySelector("div"); // Store the text (not HTML) in the sup let originalText = target.querySelector("sup").textContent; // Replace the sup element with the original content of the sup, // surrounded by () target.textContent = target.innerHTML.replace("<sup>x</sup>", "(" + originalText + ")");

 <div>BLAH BLAH BLAH <sup>x</sup></div>

Answer 3

您可以通過分別替換<sup>和</sup>來完成此操作。 您可以使用String.replace()方法來做到這一點，如下所示。

let text = "BLAH BLAH BLAH <sup>x</sup>";
let newText = text.replace("<sup>", "(").replace("</sup>", ")");