ラベル内の部分文字列を着色する

Question

アスタリスクを赤色にしたい場合、次のラベル要素があります。

<label> Lastname * </label> 

これはどのようにjQueryなどを使用して行うことができますか？

Answer 1

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

ませアセンブリん（別名jQueryの）あなたが

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

Answer 2

:-)必要

Answer 3

をしたい場合は、あなたがテキストを変更することができた場合は、CSSがより良い選択かもしれませんjQueryを使ってそれを行うことができます：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); 
       } 
      } 

    }); 

}); 

役に立てば幸い！