Replace <i> elements with <span> elements

Question

I want to replace all "i" elements with "span" elements. I try many things but it didn't work. I didn't find either error messages and debug JavaScript code in my browser.

I want to replace for example:

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

to

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

I try those but nothing works:

1)

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

 <p>This is an icon <i class="icon-user"></i> and this as well <i class="icon-user"></i>
</p>

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<p>This is an icon <i class="icon-user"></i> and this as well <i class="icon-user"></i>
</p>

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

<p>This is an icon <i class="icon-user"></i> and this as well <i class="icon-user"></i>
</p>

Answer 1

Here's an approach utilizing regex to replace the tag name but keep its structure

document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('i.icon-user').forEach(function(iconUser) {
    iconUser.outerHTML = iconUser.outerHTML.replace(/(?:(?<=^<)|(?=\w+>$))\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>

Answer 2

Not using JQuery, you can use Element.replaceWith.

Here's an example.

setTimeout(replaceIWithSpan, 1500);

function replaceIWithSpan() {
  document.querySelectorAll(`i.icon-user`)
  .forEach( i => {
    const span = document.createElement(`span`);
    // copy attributes from <i> to <span>
    for (const attr of i.attributes) {
      span.setAttribute(attr.name, attr.value);
    }
    
    span.innerHTML = i.innerHTML;
    console.log(`${i.outerHTML} replaced with\n=> ${span.outerHTML}`);
    // replace
    i.replaceWith(span);
  });
}

span.icon-user {
  color: green;
  font-weight: bold;
}

i.icon-user {
  color: red;
}

<div><i class="icon-user" id="el1">#1</i></div>
<div><i class="icon-user" id="el2">#2</i></div> 
<div><i class="icon-user" id="el3">#3</i></div>

Answer 3

The Script:

$(document).ready(()=>{
      let a=$("<span></span>").addClass('icon-user').text('abc');
    a.replaceAll("i.icon-user");
    });

It works. Try and reply. Glad to help.