如何将文本附加到 javascript 数组的所有值

Question

基本上，我需要转换一个字符串

"23423,1616,3461743,1345" 

到一个字符串

"<img src='23423'></img><img src='1616'></img><img src='3461743'></img><img src='1345'></img>

到目前为止，我已经尝试过：

    var PhotoArray=JSONeventobject.Events[i].FileNameArray.split(","); // Just convert this string to array

    for (i = 0; i < PhotoArray.length; i++) {
        PhotoArray[i] = "<img src='"+PhotoArray[i]+"</img>";
    }


            var Photostring = PhotoArray.toString().replace(",", "")

但这会导致我的浏览器崩溃。 对于我，这说得通 ：/

Answer 1

这里有一些可怕的答案。 尝试：

"1,2,3,4".split(",").map(function(a) { return "<foo>" + a + "</foo>"; }).join("");

或者使用更现代的 Javascript：

"1,2,3,4".split(",").map(a => `<foo>${a}</foo>`).join("");

另外请注意HTML 注入。

Answer 2

您需要确保关闭图像标签。 可能导致问题的另一件事是i未定义。 您的浏览器是否给出错误消息？

var str = "23423,1616,3461743,1345";
var PhotoArray = str.split(",");
for ( var i = 0; i < PhotoArray.length; i++ ) {
    PhotoArray[i] = "<img src=\"" + PhotoArray[i] + "\"></img>";
}
str = PhotoArray.join("");

Answer 3

如果你不想使用循环（我不想使用循环），你可以这样做：

var str = "23423,1616,3461743,1345";

str = ("," + str + ",").split(',').join("'></img>,<img src='").split(",").slice(1,-1).join('');

console.log(str);

它所做的是在列表的任一侧添加一个逗号，根据这些逗号将字符串拆分为一个数组，然后使用 join 调用在任一侧添加 img 标签，根据打开 img 标签和关闭之间的命令再次拆分img 标签，我们刚刚放入，燃烧数组中的第一个和最后一个元素，然后最后将它们全部重新连接成一个字符串。

控制台输出是：

<img src='23423'></img><imgsrc='1616'></img><img src='3461743'></img><img src='1345'></img>

没有什么比丑陋的单行解决方案更像的了！

Answer 4

HTML 中没有</img>标记，因此您不需要它。

在PhotoArray[i] = "<img src='"+PhotoArray[i]+"</img>"; 你没有结束图像标签，这会产生<img src='1616</img>这就是为什么它会给出奇怪的结果。 试试PhotoArray[i] = "<img src='"+PhotoArray[i]+"'>"; 反而。

Answer 5

#1    str.split([separator[, limit]])

split 函数根据我们提供的分隔符将字符串拆分为数组。 限制是可选的。

#2    arr.map(callback[, thisArg])

map 函数返回新数组，该数组由为“arr”中的每个元素调用“回调”函数的结果形成。 thisArg 是可选的。

#1    str.split([separator[, limit]])

join 函数将数组的所有元素连接成一个字符串。 限制是可选的。

所以，答案是：

var photoString = "23423,1616,3461743,1345";
var photoArray = str.split(",").map(
    function(a) {
        return '<img src="' + a + '"></img>';
    }
).join("");

来源： https : //developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String/split https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array /map https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/join

Answer 6

除了@mikel所说的——

您使用的是同一个变量， i ，作为你的索引JSONeventobject.Events并为您的索引PhotoArray 。 没有看到您的其余代码，我不知道这是否会成为问题，但值得检查。

此外，与其转换为数组并返回，不如直接编写：

var Photostring = "<img src='" + JSONeventobject.Events[i].FileNameArray.replace(/,/g, "'/><img src='") + "'/>";

（也就是说，用'/><img src='替换所有逗号，在第一个元素的<img src='加上前缀，并附加最后一个元素的'/> ）。

Answer 7

变量 ' i ' 是否声明为var ？