如何使用javascript将字符串中的值拆分为与数组相同？

Question

对于这个我的代码，当点击GET DATA我想得到element[0] ===> 1.png，该怎么办？

function xx_fn() {
  var image_pack_val = document.getElementById("image_pack").value;
  var image = [image_pack_val][0]
  alert(image);
}

<div onclick="xx_fn()">
  GET DATA
</div>
<br>
<input type="hidden" id="image_pack" value="'1.png','2.png','3.png','4.png','5.png','6.png','7.png','8.png','9.png','10.png'">

Answer 1

使用替换和拆分

您可能想要使用按钮而不是单击div

function xx_fn() {
  var image_pack_val = document.getElementById("image_pack").value;
  var image = image_pack_val.replace(/'/g,"").split(",")[0]
  console.log(image);
}

<div onclick="xx_fn()">
  GET DATA
</div>
<br>
<input type="hidden" id="image_pack" value="'1.png','2.png','3.png','4.png','5.png','6.png','7.png','8.png','9.png','10.png'">

Answer 2

您可以匹配数据并获取它的第n个元素。

function xx_fn() {
  var image_pack_val = document.getElementById("image_pack").value,
      allImages = image_pack_val.match(/[^',]+/g);

    console.log(allImages);
}

<button onclick="xx_fn()">GET DATA</button>
<br>
<input type="hidden" id="image_pack" value="'1.png','2.png','3.png','4.png','5.png','6.png','7.png','8.png','9.png','10.png'">

Answer 3

只需删除单引号'然后拆分逗号,。

function xx_fn() {
  let imageNameList = document.getElementById("image_pack").value;

  // remove all single quotes `'` and split on commas `,`
  let imageNames = imageNameList.replace(/'/g, "").split(",");
  console.log(imageNames[0]);
}

<div onclick="xx_fn()">
  GET DATA
</div>
<br>
<input type="hidden" id="image_pack" value="'1.png','2.png','3.png','4.png','5.png','6.png','7.png','8.png','9.png','10.png'">

Answer 4

您的代码将获得整个字符串而不是拆分值。所以拆分字符串并传递适当的索引以获取图像名称

function xx_fn(index) {
 var image_pack_val = document.getElementById("image_pack").value;
 var image = image_pack_val.split(',')[index]//this should be the index of element clicked
 alert(image);
}