之前如何檢測詞「：」和「跨度」包裝使用jQuery？

Question

我想在文本中檢測的字符，如果發現包裹在一個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(':', ''); 

這也不起作用。

要稍微複雜一點，我要趕的someword:任何次數，而不只是第一個。

我會很感激任何指針，歡呼聲。 （JavaScript或jQuery的）

代碼片段

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>

Answer 1

在你的情況的話案例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>

Answer 2

您可以使用正則表達式來做好這項工作。使用jQuery .html(function)改變P的HTML。在回調函數使用String.prototype.replace()包裹目標字符串中的跨度。

$("p").html(function(i, html){ 
 
    return html.replace(/(\w+\s\d+):/g, "<span class='th'>$1</span>"); 
 
});

.th { color: red }

<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>

第