在特定字符之前和之后为文本字符串着色

Question

由于输出方式的原因，我有一些数据只能以特定方式排序。

我有一个表格，其中包含如下文本字符串

MyTextString_MyTextString
MyTextString_MyTextString
MyTextString_MyTextString

为了使其更具可读性，我希望将_ 之前的文本着色为红色，将_ 之后的文本着色为蓝色。这可以用 jquery 或 php 实现吗？

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

是否可以只执行一次，例如如果有另一个文本字符串，它将保持第二种颜色，蓝色？即 Red_Blue_Blue_Blue（计数 = 1？）

标记示例。

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

Answer 1

我做了一个小提琴来展示（在我看来）一个很好的方法来做到这一点。 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);
    });
}

希望这会有所帮助！

Answer 2

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 3

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