将 class 名称<span>标签替换为^标签</span>

Question

我想将 span class 替换为<sup>标签

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

见 html，

如果存在<sup>标签，那么我想像这样将<span> class 替换为<sup>标签，

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

在if条件下

Answer 1

请检查以下示例的 output

 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>

在有多个 sup 元素的情况下

 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>

Answer 2

这可能是最好的解决方案：

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;
        }
    }
}

这会选择每个sup元素，并检查其中是否存在span 。 如果有span元素，则将sup元素的 class 设置为span的 class，并将 innerHTML 设置为span的 innerText。

我希望这是有道理的。

如果您需要 JQuery 库，那么我建议使用jquery-3.2.1.min.js 。