将 <i> 元素替换为 <span> 元素

Question

我想用“span”元素替换所有“i”元素。 我尝试了很多事情但没有成功。 我在浏览器中没有找到任何错误消息和调试 JavaScript 代码。

我想替换例如：

<i class="icon-user"></i> 

到

<span class="icon-user"></span>

我尝试了这些，但没有任何作用：

1)

(function($) {
    $(document).ready(function() {
        // Replace <i> elements with <span> elements
        $('i.icon-user').replaceWith('<span class="icon-user"></span>');
    });
})(jQuery);

2)

jQuery(document).ready(function($) {
    // Check if jQuery is loaded
    if (typeof jQuery === 'undefined') {
        console.error('jQuery is not loaded.');
        return;
    }

    // Check if the element exists
    if ($('i.icon-user').length === 0) {
        console.error('The element with class "icon-user" does not exist.');
        return;
    }

    // Replace <i> with <span>
    $('i.icon-user').each(function() {
        $(this).replaceWith('<span class="icon-user"></span>');
    });
});

3)

document.addEventListener('DOMContentLoaded', function() {
    var iconUsers = document.querySelectorAll('i.icon-user');
    iconUsers.forEach(function(iconUser) {
        var spanElement = document.createElement('span');
        spanElement.className = 'icon-user';
        iconUser.parentNode.replaceChild(spanElement, iconUser);
    });
});

Answer 1

这是一种利用正则表达式替换标签名称但保留其结构的方法

document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('i.icon-user').forEach(function(iconUser) {
    iconUser.outerHTML = iconUser.outerHTML.replace(/(?:(?<=^<)|(?=>$))\b\w+\b/g, 'span')
  });

  console.log(document.body.innerHTML);
});

<i class="icon-user"></i>
<div>
  <i id="foo" class="icon-user">
    <span>test</span>
  </i>
  <i class="bar"></i>
</div>