0

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

我有一个带有这样的文本字符串的表

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>
4

3 回答 3

3

我做了一个小提琴来展示（在我看来）一个很好的方法来做到这一点。 这是小提琴

有两个插件，一个扩展 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);
    });
}

希望这可以帮助！

于 2012-09-18T12:43:57.237 回答
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 回答
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 回答