演示

Question

（JQUERY）我正在尝试从页面的文本区域内填充数组，但是以某种方式我无法理解数组所需的格式。如何使用“拆分”在我的文本区域内填充此数组形式？

这是用于YouTube外部字幕（JQUERY插件）的本地安装

在这里您可以看到数组中每个条目的外观，但是如果我在textarea中编写该条目，则不遵循这种格式。

{
"start": 10.28,
"end": 11.5,
"text": "PO: Master Shifu?"
},

这是保存文本区域的代码。

<textarea name="subtitulos" id="subtitulos" cols="30" rows="10" style="position:relative;z-index:10000"></textarea>

<script>
var subtitle = [];
var textarea = document.querySelector('textarea#subtitulos');

function saveNames() {
subtitle = textarea.value.split(',');
var youtubeExternalSubtitle = new YoutubeExternalSubtitle.Subtitle(document.getElementById('ytplayer'), subtitle);
    }

function subtitles() {
console.log( subtitle );
}
</script>

预期结果：我希望它以完全格式化数组的相同方式填充数组，以便可以显示字幕。

最终发生的事情是我最终得到了一个奇怪的数组，该数组只在\ n或（逗号）上分割。

更新有人问我需要什么输出。输出是一个用textarea中的数组填充的变量，但是以某种方式它始终告诉我我创建的变量为null（即使在控制台中将其打印出来！）。

const str_obj = document.getElementById("subtitle").value;
const js_obj = str_obj;
console.log(js_obj);

var subtitle = [js_obj];

结果为： TypeError：字幕为空

Answer 1

您可以使用JSON.parse()而不是拆分用户输入来创建对象，而是将textarea输入字符串转换为javascript对象数组。

let all_objects = [];

const addObjToArray = function() {
  const str_objs = document.getElementById("txt").value;
  all_objects = JSON.parse(str_objs);
  
  console.log("The array: ", all_objects);
  console.log("The first object's start is: " +all_objects[0].start);
}

textarea {
  height: 100px;
  width: 300px;
}

<textarea id="txt">
[{
  "start": 10.28,
  "end": 11.5,
  "text": "PO: Master Shifu?"
},
{
  "start": 10.30,
  "end": 11.15,
  "text": "Master Shifu: PO?"
},
{
  "start": 12.30,
  "end": 13.50,
  "text": "Tigress: Meow"
}]
</textarea>

<button onclick="addObjToArray()">Add obj to array</button>

您可以使用此想法将subtitle的值设置为在文本区域中输入到js对象的对象。

Answer 2

这可能会麻烦您，我认为您需要将字符串作为JSON传递，而不是将其拆分。好处是您还可以保留所有信息并轻松访问。

下面的演示使您可以在文本输入中试用字符串格式，并了解其工作原理

演示

$(document).on("click", "#test", function() {

  console.log("Parsing JSON");

  // Get text from field
  var inputText = $("#txt").val();

  // Parse JSON string into array of objects
  var objArray = JSON.parse(inputText);

  // Cycle through array of objects and print to 
  var l = objArray.length;
  for (var i = 0; i < l; i++) {
  
    // Print all the variables we are expecting - i.e. name, start, end
    console.log(objArray[i].text + " (" +
      objArray[i].start + "-" + objArray[i].end + ")");
      
  }

});

textarea {
  height: 100px;
  width: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="txt">
[{
  "start": 10.28,
  "end": 11.5,
  "text": "PO: Master Shifu?"
}, {
  "start": 1.28,
  "end": 1.5,
  "text": "PO: Master Shifu? 2"
}]
</textarea>

<button id="test">Test</button>

使用textarea用jQuery填充数组

2 个答案:

演示