Question

如何将Weekend's颜色更改为蓝色？

我使用razor并且我有一个可以直接转换为字符串的flag-enum：

var a = 1|2|6|7;
var weekdayStr=a.ToString();//weekdayStr=="Monday, Tuesday, Weekend"

和html：

<table>
<tr>
<td>Monday, Tuesday, Weekend</td></tr></table>

我如何只更改一个单词的颜色，而不是td中的所有文字？

Answer 1

您必须手动添加html标记，或者找到td并使用jQuery修改它。

$('td').html($('td').html().replace('Weekend', '<span>Weekend</span>'));
$('td span').css('color', 'blue');

Something like this fiddle

更新：

new jsFiddle

Answer 2

$(document).ready(function(){
  var build = '';
  var data = $('#yourtd_id').html().split(',');
  $.each(data,function(v){
         if(v == 'Weekend'){
          build+='<span style="color:blue">'+v+'</span>,';
         }else{
          build+='<span>'+v+'</span>,';
         }

  });  
$('#yourtd_id').html(build)

});

Answer 3

 $.fn.replaceText = function( search, replace, text_only ) {
return this.each(function(){
  var node = this.firstChild,
    val,
    new_val,
    remove = [];
  if ( node ) {
    do {
      if ( node.nodeType === 3 ) {
        val = node.nodeValue;
        new_val = val.replace( search, replace );
        if ( new_val !== val ) {
          if ( !text_only && /</.test( new_val ) ) {
            $(node).before( new_val );
            remove.push( node );
          } else {
            node.nodeValue = new_val;
          }
        }
      }
    } while ( node = node.nextSibling );
  }
  remove.length && $(remove).remove();
});
};

$("td").replaceText( /Weekend/g, "<span>Weekend</span>" );  
$('td span').css('color', 'blue');

reference from

如何在td（jquery）中更改单词的颜色

3 个答案: