Как можно обернуть слова в элементы span, если они еще не обернуты?

Question

Как я писал в заголовке - я ищу способ обернуть слова в элементы span. Это должно быть сделано только если они еще не завернуты. Я абсолютно не знаю, как я могу это сделать. Я попробовал это ниже, но это работает только в первый раз. Когда я делаю это во второй раз, старые слова переносятся x раз, даже если они уже упакованы.

function wrap() {
  jQuery("div").html(jQuery("div").html().replace(/Johnny/g, '<span class="wrapper" contenteditable="false">Johnny</span>'));
}

div {
  border: 1px solid;
}

.wrapper {
  color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div contenteditable="true">My name is Johnny, My name is Johnny, My name is Johnny, My name is Johnny, My name is Johnny</div>
<button onclick="wrap()">Wrap Text</button>

Так что, надеюсь, у кого-то есть идея, как я могу исправить проблему с упаковкой - может быть, с помощью чека?

Answer 1

Попробуйте это

 function wrap() {
      $(".wrapper").contents().unwrap();
      $("div").html($("div").html().replace(/Johnny/g, '<span class="wrapper" contenteditable="false">Johnny</span>'));
    }

Answer 2

Просто измените регулярное выражение:)

function wrap() {
  jQuery("div")
  .html(
    jQuery("div")
      .html()
      .replace(/(?!<span>)Johnny(?!<\/span>)/g, '<span class="wrapper" contenteditable="false">Johnny</span>')
  );
}

div {
  border: 1px solid;
}

.wrapper {
  color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div contenteditable="true">My name is Johnny, My name is Johnny, My name is Johnny, My name is Johnny, My name is Johnny</div>
<button onclick="wrap()">Wrap Text</button>