CODEWITHSUNDEEP
phpjavascriptjquerytext
SMacFadyen
SMacFadyen

Reputation: 3165

Color a text string before and after a specific character

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>

Upvotes: 0

Views: 881

Answers (3)

sra
sra

Reputation: 6408

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

Upvotes: 1

Kristoffer Lundberg
Kristoffer Lundberg

Reputation: 876

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!

Upvotes: 3

feeela
feeela

Reputation: 29932

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

Upvotes: 1

Related Questions