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? i.e. Red_Blue_Blue_Blue (Count = 1?)

Example of markup.

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

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