How to replace HTML elements like `X` by parentheticals like `(X)`?

Question

I have HTML like this — BLAH BLAH BLAH <sup>x</sup> — inside a <th>.

I am trying to replace <sup>x</sup> by (x).

These are all the different methods I have tried. insideSup is the letter.

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

You already have the DOM available to you. You don’t need regex at all. Just use the replaceWith method:

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

Equivalently, without jQuery, assuming tableRow is an HTMLTableRowElement, using a method with the same name:

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

Answer 2

Pretty straight-forward with just 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

You can accomplish this by replacing the <sup> and </sup> separately. You can do it by using String.replace() method as shown below.

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