javascript - 如果单词尚未包装，如何将它们包装到 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>

所以希望有人知道我如何解决包装问题 - 也许用支票？

标签： javascripthtmljquerycss

Answer 1

尝试这个

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