Question

我有一些数据只能按照输出的方式按特定方式排序。

我有一个包含

等文本字符串的表格

MyTextString_MyTextString
MyTextString_MyTextString
MyTextString_MyTextString

为了使其更具可读性，我希望在_红色和_蓝色之后的文本之前为文本着色。这有可能用jquery或php吗？

我尝试过诸如$('.myElement').find('_').css('color','red);之类的事情，但不认为这是正确的做法。

是否可以只执行一次，例如，如果有另一个文本字符串，它将保持第二种颜色，蓝色？即Red_Blue_Blue_Blue（Count = 1？）

标记示例。

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

Answer 1

我做了一个小提示（在我看来）这是一个很好的方法。 Here is the fiddle

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

希望这有帮助！

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

编辑：您还可以使用一个带有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);
    });
};

在特定字符之前和之后为文本字符串着色

3 个答案: