为特定字符前后的文本字符串上色

Question

I have some data that can only be sorted in specific ways due to the way it's outputted.

I have a table with such text strings as

MyTextString_MyTextString
MyTextString_MyTextString
MyTextString_MyTextString

To make it more readable, I'm looking to color the text before _ red and the text after _ blue. Is this possible with jquery, or php?

I have tried things such as $('.myElement').find('_').css('color','red); but don't think that is the right approach.

Is it possible to only do this once, such as if there is another text string it will remain the second color, blue? ie Red_Blue_Blue_Blue (Count = 1?)

Example of markup.

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

Answer 1

I've done a fiddle to show (in my opinion) a nice way to do this. Here is the fiddle

There are two plugins, one that extend String.prototype and another one that extends jQuery.fn. By doing this way you call ".colorize()" both from a string and an element. I've included some examples in the fiddle.

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

Hope this helps!

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

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

edit: You could also utilize a helper function that takes jQuery elements like this:

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

edit: working jsFiddle: http://jsfiddle.net/tGV54/1/

edit: based on Kristoffers code:

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