Заменить ссылки при помощи js?

Question

Сервер выдает ссылку, вида

<a href='xxx' class=''>yyy</a><a class='' href='xxy'>yyx</a>

а нужно

<li class="nav-item">
<a href="xxx" class="nav-link ">yyy</a>
</li>
<li class="nav-item">
<a href="xxy" class="nav-link ">yyx</a>
</li>

ссылок примерно 10-15 как сделать подскажите, спасибо!

Answer 1

Думаю вам поможет функция .wrap() у jQuery.

$('a')
  .addClass('nav-link') // Добавим класс, как было в примере
  .wrap('<li class="nav-item">'); // Обернём ссылки li.nav-item

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href='xxx' class=''>yyy</a><a class='' href='xxy'>yyx</a><a href='xxx' class=''>yyy</a><a class='' href='xxy'>yyx</a><a href='xxx' class=''>yyy</a><a class='' href='xxy'>yyx</a><a href='xxx' class=''>yyy</a><a class='' href='xxy'>yyx</a><a href='xxx' class=''>yyy</a><a class='' href='xxy'>yyx</a><a href='xxx' class=''>yyy</a><a class='' href='xxy'>yyx</a><a href='xxx' class=''>yyy</a><a class='' href='xxy'>yyx</a><a href='xxx' class=''>yyy</a><a class='' href='xxy'>yyx</a><a href='xxx' class=''>yyy</a><a class='' href='xxy'>yyx</a><a href='xxx' class=''>yyy</a><a class='' href='xxy'>yyx</a>

Answer 2

let html = "<a href='xxx' class=''>yyy</a><a class='' href='xxy'>yyx</a>";

html = correct(html);
document.body.insertAdjacentHTML('beforeEnd', html);

/***/

function correct(html) {
  let div = document.createElement('div');
  div.innerHTML = html;
  
  div.querySelectorAll('a').forEach(a => {
    a.classList.add('nav-link');
    a.outerHTML = '<li class="nav-item">' + a.outerHTML + '</li>';
  });
  
  return div.innerHTML;
}

.nav-item { color: blue; }
.nav-link { color: red; }

БЛОГ НА HUSL

Заменить ссылки при помощи js?

Ответы (2 шт):