2011-10-26 18 views
10

のすべての値にテキストを追加する方法基本的に、私はこれまでのところ、私が試してみましたjavascript配列

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

文字列に文字列

"23423,1616,3461743,1345" 

を変換する必要があります。

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(",", "") 

しかし、これは私のブラウザをクラッシュさせます。私には意味があります:/

答えて

3

イメージタグを必ず閉じる必要があります。問題を引き起こす可能性のある別のものは、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(""); 
+0

ありがとうございます! ::) – TaylorMac

+3

イメージ要素の終了タグは禁止されています。 – Quentin

1

HTMLに</img>というタグはありませんので、必要ありません。

PhotoArray[i] = "<img src='"+PhotoArray[i]+"</img>";で画像タグを終了していない場合は、<img src='1616</img>という結果になり、奇妙な結果が得られます。代わりにPhotoArray[i] = "<img src='"+PhotoArray[i]+"'>";を試してください。 @mikelが言うに加えて

+0

は右、変更が、これはまだブラウザ墜落:/ – TaylorMac

+0

どのように?どのブラウザですか?私たちが見ることができるように、あなたはjsfiddleにレプロを置くことができますか? – mikel

0

- あなたはJSONeventobject.EventsへとPhotoArrayにあなたのインデックスとして、あなたのインデックスと同じ変数、iを、使用している

。残りのコードを見ることなく、私はそれが問題になるかどうかは分かりませんが、チェックする価値はあります。

また、むしろバック配列に変換し、より、それだけで書く方が簡単そうです:

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

(つまり、'/><img src='ですべてのカンマを置き換える最初の要素の<img src='の接頭辞、そして最後を追加します要素の'/>)。

0

varとして宣言された変数 'i' ですか?

1

あなたは(と私はループを使いたくなかった)ループを使用したくない場合は、あなたがこれを行うことができます:

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タグを閉じ、配列内の最後の要素を削除し、最後にすべてを1つの文字列に結合します。

コンソール出力は次のようになります。醜い一行液のような

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

何もありません!

14

ここではひどい答えがあります。試してみてください:私たちは与えるセパレーターに基づいて、配列 に文字列を分割

"1,2,3,4".split(",").map(function(a) { return "<foo>" + a + "</foo>"; }).join(""); 
0
#1 str.split([separator[, limit]]) 

スプリット機能を。制限はオプションです。

#2 arr.map(callback[, thisArg]) 
「ARR」内の各要素に対して 呼び出し「コールバック」関数 の結果から が形成されている新しい配列 を返し

マップ機能。 thisArgはオプションです。

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

機能に参加するには、文字列に、アレイのすべての要素を、合流します。制限はオプションです。

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