Как при клике на li зачеркивать текст, но не ссылку

По клику на кнопку добавляется ссылка в конец каждого li. Необходимо, чтобы при клике на li перечеркивался текст ссылки, но сама ссылка оставалась не перечеркнутой и доступной для клика. Я реализовал следующее:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <ul>
    <li>Ссылка 1</li>
    <li>Ссылка 2</li>
    <li>Ссылка 3</li>
    <li>Ссылка 4</li>
    <li>Ссылка 5</li>
    <li>Ссылка 6</li>
    <li>Ссылка 7</li>
    <li>Ссылка 8</li>
    <li>Ссылка 9</li>
    <li>Ссылка 10</li>
    <li>Ссылка 11</li>
  </ul>
  <button>press me</button>
  <script>
    let ul = document.querySelector("ul");
    let href = `<a href='#'>${"http://127.0.0.1:5500/122.html"}</a>` // ссылка для добавления в li
    let lis = document.querySelectorAll("li"); // ищу все li
    document.querySelector("button").addEventListener("click", function() {
      for (const li of lis) {
        li.innerHTML = li.textContent + ': ' + href // добавляю в каждый li ссылку 
      }
      ul.addEventListener("click", function(event) {
        let li = event.target.closest("li"); // ищу li
        if (li) {
          li.innerHTML = li.textContent.replace(/([А-Яа-я]+)/g, "<s>$&</s>"); 
          // пытаюсь перечеркивать только текст ссылки, но если текст будет на английском, то замены не будет, а если в regexp добавить поиск латинские символы и цифры, то вообще идёт перечеркивание всего li, плюс ссылка перестает быть активной  
        }
      });
    });
  </script>
</body>

</html>

Не могу понять: я изначально создал ошибочную логику добавления в li ссылки или мне надо доработать с regexp (например, создать отрицающий блок предварительного просмотра, который будет отменять совпадение, если встретит двоеточие)


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

Автор решения: Dev18

Ваша логика добавления ссылки в li является правильной на мой взгляд, трудности по-моему возникают на этапе перечёркивания текста(?), при использовании регулярного выражения для поиска текста и его замены, сложно как то...(для меня) Я бы не стала использовать регулярное выражение в данной задаче, а сразу бы работала с DOM, предложу такой вариант

//беру ссылку на список
const myList = document.getElementById('myList');

document.getElementById('addLinksBtn').addEventListener('click', function() {
  //прохожу по li внутри моего myList
  myList.querySelectorAll('li').forEach(li => {
    //проверяю, как же без проверки, и добавляю, если нету ссылку
    if (!li.querySelector('a')) {
      const textContent = li.textContent.trim(); //получаю текст li
      li.innerHTML = `<span>${textContent}</span> <a href="https://ru.stackoverflow.com/q/1593414/264178" class="strike-link" target="_blank">Я ссылка, меня не перечеркиваем</a>`;
    }
  });
});
myList.addEventListener('click', function(event) {
  const li = event.target.closest('li');
  //проверяю, чтобы клик не был по ссылке и у li была ссылка
  if (!event.target.matches('.strike-link') && li.querySelector('a')) {
    //добавляю/удаляю класс strikethrough для li
    li.classList.toggle('strikethrough');
  }
});
.strikethrough span {
  text-decoration: line-through;
}
<ul id="myList">
  <li>Текст ссылки1, надо перечеркнуть</li>
  <li>Текст ссылки2, надо перечеркнуть</li>
  <li>Текст ссылки3, надо перечеркнуть</li>
</ul>

<button id="addLinksBtn">Добавить ссылки</button>

→ Ссылка
Автор решения: ksa

Как при клике на li зачеркивать текст, но не ссылку

Например вот так такое можно сделать...

const ul = document.querySelector("ul");
const href = `<a href='#'>${"http://127.0.0.1:5500/122.html"}</a>`
const lis = ul.querySelectorAll("li");
document.querySelector("button").addEventListener("click", function() {
  lis.forEach(o => {
    o.innerHTML = `<span>${o.textContent}</span> ${href}`
  })
  ul.addEventListener("click", function(event) {
    const li = event.target.closest("li");
    if (!li) return
    li.querySelector("span").classList.add('off');
  });
}, { once: true });
.off {
  text-decoration: line-through;
}
<ul>
  <li>Ссылка 1</li>
  <li>Ссылка 2</li>
  <li>Ссылка 3</li>
  <li>Ссылка 4</li>
  <li>Ссылка 5</li>
  <li>Ссылка 6</li>
  <li>Ссылка 7</li>
  <li>Ссылка 8</li>
  <li>Ссылка 9</li>
  <li>Ссылка 10</li>
  <li>Ссылка 11</li>
</ul>
<button>press me</button>

→ Ссылка
Автор решения: alexWithoutBeard

Чуть исправил свой код и получил нужный результат. Всем спасибо за варианты решений)

 let ul = document.querySelector("ul");
  let href = `<a href='#'>${"http://127.0.0.1:5500/122.html"}</a>`; // ссылка для добавления в li
  let lis = document.querySelectorAll("li"); // ищу все li
  document.querySelector("button").addEventListener("click", function () {
    for (const li of lis) {
      li.innerHTML = `<span>${li.textContent}</span>: ${href} `; // добавляю в каждый li ссылку и оборачиваю текст li в span
    }
    ul.addEventListener("click", function (event) {
      let li = event.target.closest("span"); // ищу все li
      if (li) {
        li.innerHTML =  `<s>${li.textContent}</s>`// оборачиваю span в <S>
      } else return;
    });
  }, { once: true });
 <ul>
  <li>Ссылка 1</li>
  <li>Ссылка 2</li>
  <li>Ссылка 3</li>
  <li>Ссылка 4</li>
  <li>Ссылка 5</li>
  <li>Ссылка 6</li>
  <li>Ссылка 7</li>
  <li>Ссылка 8</li>
  <li>Ссылка 9</li>
  <li>Ссылка 10</li>
  <li>Ссылка 11</li>
</ul>
<button>press me</button>

→ Ссылка