0

出力方法が原因で特定の方法でしか並べ替えることができないデータがいくつかあります。

次のようなテキスト文字列を含むテーブルがあります

MyTextString_MyTextString
MyTextString_MyTextString
MyTextString_MyTextString

読みやすくするために、テキストを_赤の前に、テキストを_青の後に色付けすることを検討しています。これはjqueryまたはphpで可能ですか？

私は次のようなことを試みまし$('.myElement').find('_').css('color','red);たが、それが正しいアプローチだとは思いません。

別のテキスト文字列がある場合、2番目の色である青のままになるなど、これを1回だけ実行することは可能ですか？つまり、Red_Blue_Blue_Blue（Count = 1？）

マークアップの例。

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

3 に答える 3

3

私はこれを行うための良い方法を（私の意見では）示すためにフィドルをしました。 これがフィドルです

2つのプラグインがあります。1つはString.prototypeを拡張し、もう1つは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);
    });
}

お役に立てれば！

于 2012-09-18T12:43:57.237 に答える
1

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 );
于 2012-09-18T09:35:14.327 に答える
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);
    });
};
于 2012-09-18T10:04:54.150 に答える