在特定字符之前和之后给文本字符串加上颜色

Question

我有一些数据只能按特定方式排序，因为它的输出方式不同。

我有这样的文本字符串表作为

MyTextString_MyTextString 
MyTextString_MyTextString 
MyTextString_MyTextString 

为了使其更具可读性，我在寻找以前_红色和后_蓝色文本颜色的文本。这可能与jQuery的，或PHP？

我尝试了诸如$('.myElement').find('_').css('color','red);之类的东西，但不认为这是正确的做法。

是否有可能只做一次这样的事情，比如如果还有其他文本字符串，它会保持第二个颜色，蓝色？即Red_Blue_Blue_Blue（Count = 1？）

标记示例。

<td class="myTextString1"> 
    MyTextString_MyTextString1 
    <br/> 
    MyTextString_MyTextString2 
    <br/> 
    MyTextString_MyTextString3 
</p> 

Answer 1

JS：

var colorize = function(text) { 
    var delimiter = "_", 
     parts = text.split(delimiter), 
     firstPart = $("<span>", { class: 'red', html: parts[0] }), 
     secondPart = $("<span>", { class: 'blue', html: text.split(parts[0] + delimiter)[1] }); 

    return $("<div>").append(firstPart).append(delimiter).append(secondPart).html(); 
} 

编辑：你也可以利用一个辅助函数，它jQuery的元素是这样的：

var colorizeElements = function($elements) { 
    // $elements has to be something like $("td.classname") 
    $elements.each(function() { 
    $(this).html(colorize($(this).html())); 
    }); 
}; 

编辑：工作jsFiddle：http://jsfiddle.net/tGV54/1/

编辑：基于Kristoffers代码：

String.prototype.colorize = function() { 
    var regex = new RegExp('[^_]+', 'gi'), 
     color = $.extend(['blue', 'red'], arguments || []), 
     index = 0; 

    return this.replace(regex, function(matched) { 
     return '<span style="color: ' + color[index++] + ';">' + matched + '</span>'; 
    }); 
}; 

$.fn.customColorize = function() { 
    var args = arguments, 
     delimiter = "<br>"; 

    return this.each(function() { 
     var splitetElements = $.map(this.innerHTML.split(delimiter), function(s) { return s.colorize(); }); 
     this.innerHTML = splitetElements.join(delimiter); 
    }); 
}; 

Answer 2

PHP：

$stringParts = explode('_', 'MyTextString_MyTextString'); 
$stringParts[0] = sprintf('<span style="color: #f00;">%s</span>', $stringParts[0]); 
if(count($stringParts) > 1) 
{ 
    $stringParts[1] = sprintf('<span style="color: #00f;">%s</span>', $stringParts[1]); 
    /* …or whatever */ 
} 
echo implode('_', $stringParts); 

Answer 3

我已经做了小提琴显示（在我看来）一个很好的办法做到这一点。 Here is the fiddle

有两个插件，一个扩展了String.prototype，另一个扩展了jQuery.fn。通过这种方式，您可以从字符串和元素中调用“.colorize（）”。我在小提琴中包含了一些例子。

String.prototype.colorize = function() { 
    var regex = new RegExp('[^_]+', 'gi'), 
     color = $.extend(['blue', 'red'], arguments || []), 
     index = 0;  

    return this.replace(regex, function(matched) { 
     return '<span style="color: ' + color[index++] + ';">' + matched + '</span>'; 
    }); 
} 

$.fn.colorize = function() { 
    var args = arguments; 

    return this.each(function() { 
     this.innerHTML = this.innerHTML.colorize 
      .apply(this.innerHTML, args); 
    }); 
} 

希望这会有所帮助！