关于数组/正则表达式的问题答案

【问题标题】：Questions about Arrays / Regex关于数组/正则表达式的问题
【发布时间】：2011-08-27 11:17:31
【问题描述】：

var icons = $(".IT_Icon").text().trim().split(",");

在上面，逗号之间的元素文本部分被分解并存储在一个数组中。如果我想对源列表中的项目进行包装或附加或做任何事情，我该怎么做？

例如：

之前：

[cat, dog, mouse, elephant, lion, bird]

之后：

<img src="cat"/>, <img src="dog"/>, <img src="mouse"/>, <img src="elephant"/>, <img src="lion"/>, <img src="bird"/>

再想一想，难道我不能有一个正则表达式来查找列表的“部分”，逗号之间是什么，并用我需要的任何东西来补充它？是包装还是替换？

回答

这就是我最终的结果：

$(".IT_badge").each(function () {
    var badges = $(this).text().trim().split(",");

$(this).html("");

    for (i = 0; badges.length > i; i++) {
        $(this).append($("<img/>").attr("src", 'IT_Badges/' + badges[i] + '.png'));

        if (!(badges.length === i+1)) {
            $(this).append(", ");           
        }
    }


});

【问题讨论】：

包装一个项目是什么意思？
有多种方法可以做到这一点，但更多信息会很有用。你如何决定更换哪一个？在示例中，是否将“大象”替换为“GUESS”，是否将第 4 个条目替换为 GUESS？等等。然后替换后该怎么办？是否只是为了更新 span 中的文本？
您是否要替换 span 的文本？
@hunter @Felix Kling - 我最终想将逗号列表中的单词“转换”为图标，因此我想将 img scr="' + word + ' 中的单词“包装” "/>.

标签： javascript jquery regex arrays split

【解决方案1】：

我最喜欢的方法很简单：

str = '<img src="' + ary.join('"/><img src="') + '"/>';

这将为您提供一串图像标签。如果你想用 jQuery 来做，比如：

(".IT_Icon").each(function(){
    var $this = $(this);
    $this.html('<img src="' + $this.text() + '"/>');
});

你想得到一个字符串吗？修改 HTML？

【讨论】：

第一种方法很有效。如果数组中只有一项，那么它会中断并且看起来不太好。第二种方法也几乎可以工作，但它不会产生多个图标 img。
我让它工作了。即使我的脚本完全不同，我还是选择了你的作为正确的，只是因为你的使用了类似的功能，等等。

【解决方案2】：

您可以使用jQuery.map() 函数：

var s1 = [cat, dog, mouse, elephant, lion, bird];
var s2 = $.map(s1, function(x) {
  var img = new Image();
  img.src = x;
  return img;
});
s2; // => [<img src="cat"/>, <img src="dog"/>, ..., <img src="bird"/>];

【讨论】：

【解决方案3】：

我建议您使用Array.prototype.map，如果您的浏览器不支持，您可以轻松创建它。

if (!Array.prototype.map)
{
  Array.prototype.map = function(fun /*, thisp */)
  {
    "use strict";

    if (this === void 0 || this === null)
      throw new TypeError();

    var t = Object(this);
    var len = t.length >>> 0;
    if (typeof fun !== "function")
      throw new TypeError();

    var res = new Array(len);
    var thisp = arguments[1];
    for (var i = 0; i < len; i++)
    {
      if (i in t)
        res[i] = fun.call(thisp, t[i], i, t);
    }

    return res;
  };
}

那么你可以这样使用它：

var newIcons = icons.map(function(v) {
    return "<img src='" + v + ".png' />";
});

【讨论】：

我强烈建议使用$.map 或_.map 而不是扩展Array.prototype
@Raynos - 这种方法的优点是任何本机实现都将是闪电般的快速。 Firefox 3.5+ 本机支持此功能，而 IE9+ 则支持。此外，您的评论让我不确定为什么您认为您的选择更好。
@ChaosPandion $.map 和 _.map 通过特征检测委托给原生地图。这些实现非常聪明。扩展原生原型是魔鬼。
@Raynos - 为什么它是你说得如此雄辩的“魔鬼”？
@ChaosPandion 它弄乱了本机对象的状态。它破坏了对 Array.prototype 做出假设的代码。这很糟糕，因为扩展 Object.prototype 很糟糕，它打破了for ... in 循环。

【解决方案4】：

这样的？

var icons = $(".IT_Icon").text().trim().split(",");

$.each(icons, function(i, e){
    $("#container").append($("<img/>", { src: $.trim(e) }));
});

http://jsfiddle.net/hunter/e8Vhj/

【讨论】：