javascript – 如何在“：”之前检测单词并使用jquery包装在“span”中？

我正在尝试检测文本中的字符,如果发现在HTML元素中将其包装在前面,则删除该字符.

例：

Case:

变

<span class="th">Case</span>

方法

我可以检测到存在：使用：

if (str.indexOf(':') > -1)

在我使用之前得到这个词：

var th = str.split(':')[0];

要将单词包装在我尝试过的元素中：

var th_wrap = "<span class='th'></span>";  
$(th).wrap(th_wrap);

哪个不起作用.
删除：我试过：

th.replace(':', '');

哪个也行不通.

为了使它稍微复杂一些,我想抓住任何出现的问题：而不仅仅是第一个问题.

我很感激任何指示,欢呼. (javascript或jQuery)

SNIPPET

var str = $('.target').html();
if (str.indexOf(':') > -1) {
  var th = str.split(':')[0];
  th.replace(':', '');
  var th_wrap = "<span class='th'></span>";
  $(th).wrap(th_wrap);
}

th { font-weight: bold; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="target">
  Case 1:
  <br />some text
  <br />some more text
  <br />even more text
  <br />
  <br />Case 2:
  <br />some text
  <br />some more text
  <br />even more text
</p>

解决方法:

在您的情况下,单词案例1：和案例2：是文本节点.

因此,您需要将所有节点都置于目标之下：为此,请使用jQuery.contents().

片段：

$('.target').contents().each(function(idx, ele) {
  if (ele.nodeType == Node.TEXT_NODE &&
            ele.textContent.indexOf(':') > -1) {
    ele.textContent = ele.textContent.replace(':', '');
    $(ele).wrap($('<span/>', {
      class: 'th'
    }));

  }
});

.th {
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<p class="target">
    Case 1:
    <br />some text
    <br />some more text
    <br />even more text
    <br />
    <br />Case 2:
    <br />some text
    <br />some more text
    <br />even more text
</p>