爲標籤中的子串着色

Question

我有以下標籤元素，我想將星號標記爲紅色。

<label> Lastname * </label> 

這怎麼能用jQuery來完成呢？

Answer 1

var label = document.getElementById('labelId'); 
label.innerHTML = label.innerHTML.replace('*', '<span style="color:red;">*</span>'); 

沒有組件（又名jQuery的）需要:-)

Answer 2

你可以用jQuery做，如果你想

$('#labelId').html($('#labelId').text().replace('*', '<span style="color:red;">*</span>')); 

Answer 3

如果你可以改變文本，CSS可能是一個更好的選擇：http://jsfiddle.net/VwLQM/。

label:after { 
    color: red; 
    content: "*"; 
} 

然後<label>test</label>將自動具有後有一個紅色的*。

:after確實not fully work on IE8，所以這可能是一個重要的事情要考慮。

Answer 4

雖然這可能有點複雜，它確實會給你一個小小的擺動空間來標記元素中的紅色星號，而不僅僅是文本內部的文本，並且可能會在不同的瀏覽器中給你帶來更少的麻煩。

http://jsfiddle.net/QjJmT/

$(function(){ 

    var elements = $('label'); 
    var markup_element = $('<span class="red">*</span>'); 

    elements.each(function(){ 

     //wrap the element in a jquery object and get it's text string 
      var element = $(this);  
      var element_text = element.text(); 

     //use regex to use the * as a delimeter 
      var other_parts = element_text.split(/\*/); 

     //empty the element re-add each part programmatically 
      element.empty(); 
      for(var i = 0; i < other_parts.length; i++){ 
       element.append(other_parts[i]); 
       if(i != other_parts.length - 1){ 
        element.append(markup_element); 
       } 
      } 

    }); 

}); 

希望幫助！