0

I want to replace span class to the <sup> tag

<sup>
  <span class="wysiwyg-color-yellow">test</span>
</sup>

see html,

If <sup> tag exist then i want to replace <span> class to the <sup> tag like this,

<sup class="wysiwyg-color-yellow">test</sup>

in if condition

Andreas
  • 21,535
  • 7
  • 47
  • 56
iAmGroot
  • 950
  • 1
  • 6
  • 22

2 Answers2

1

Please inspect the output of the following example

const color = document.querySelector(".wysiwyg-color-yellow");
const sup = document.querySelector("sup");

if (color.nodeName === "SPAN") {
  sup.innerHTML = color.textContent; // here is removed the inner span
  sup.classList.add(color.getAttribute("class"));
}
<sup>
  <span class="wysiwyg-color-yellow">test</span>
</sup>

In the case that there is more than one sup element

const colors = document.querySelectorAll("sup > span");

colors.forEach((color) => {
  const parent = color.parentNode;

  parent.innerHTML = color.textContent;
  parent.classList.add(color.getAttribute("class"));
});
<sup>
  <span class="wysiwyg-color-yellow">test</span>
</sup>
<sup>
  <span class="wysiwyg-color-green">test</span>
</sup>
<sup>
  <span class="wysiwyg-color-blue">test</span>
</sup>
<sup>
  <span class="wysiwyg-color-orange">test</span>
</sup>
Mario
  • 4,784
  • 3
  • 34
  • 50
  • While this does technically work, it does not modify every sup element, and only changes the class to "wysiwyg-color-yellow", when the span's class could be something else. – Nanoo Jun 29 '20 at 14:01
  • about `only changes the class to" wysiwyg-color-yellow ", when the span's class could be something else` I have updated the answer to assign to sup the class name of the selected element. About ` it does not modify every sup element` you have told me that there is only one sup element – Mario Jun 29 '20 at 14:06
  • @Mario ty so much it help me. – iAmGroot Jun 30 '20 at 04:42
  • @Mario can you help me to solve this .. https://stackoverflow.com/questions/62527376/enable-underline-for-lowercase-characters-g-q-p-j-y – iAmGroot Jul 06 '20 at 07:05
1

Here is probably the best solution:

var buttons = $("sup");

for(var i=0; i< buttons.length; i++){
    if (buttons[i].children[0]) {
        if (buttons[i].children[0].nodeName == "SPAN") {
            var spanElement = buttons[i].children[0];
            buttons[i].setAttribute("class", spanElement.getAttribute("class"));
            buttons[i].innerHTML = spanElement.innerText;
        }
    }
}

This selects every sup element, and checks whether there is a span within it. If there is a span element, then it sets the sup element's class to the span's class, and sets the innerHTML to the span's innerText.

I hope that makes sense.

If you need the JQuery library, then I recommend using jquery-3.2.1.min.js.

Nanoo
  • 836
  • 8
  • 16
  • can you help me to solve this https://stackoverflow.com/questions/62527376/enable-underline-for-lowercase-characters-g-q-p-j-y – iAmGroot Jul 06 '20 at 07:06