javascript - 在 JS 中转动特定的文本 block 并生成行

Question

我尝试在 JS/jQuery 中解决这个问题，但无法理解它。我有一个文本 block ，我想将其粘贴到文本区域中，它将生成 x 行(表)行以及其中的输入。它始终是一个时间码，后跟一个文本，然后是另一个时间码。如何将这样的内容粘贴到文本区域中:

01:00:17:02.28  1m01 Main Title  00:02:32:17.47
01:22:04:15.77  Hit at 1:22:30   00:00:20:10.01
01:26:23:17.60  1M2s - End Title     00:01:22:14.01

并生成这个:

<table>
    <tr>
        <td><input value="01:00:17:02.28"></td>
        <td><input value="1"></td>
        <td><input value="m"></td>
        <td><input value="01"></td>
        <td><input value="Main Title"></td>
        <td><input value="00:02:32:17.47"></td>
    </tr>
    <tr>
        <td><input value="01:22:04:15.77"></td>
        <td><input value=""></td>
        <td><input value=""></td>
        <td><input value=""></td>
        <td><input value="Hit at 1:22:30"></td>
        <td><input value="00:00:20:10.01"></td>
    </tr>
    <tr>
        <td><input value="01:26:23:17.60"></td>
        <td><input value="101"></td>
        <td><input value="M"></td>
        <td><input value="2s"></td>
        <td><input value="End Title"></td>
        <td><input value="00:01:22:14.01"></td>
    </tr>
</table>

换句话说:

1. 打破第一个时间码
2. 查看中间 block 是否以语法 1m1s 开头(数字、大写或小写“m”、字符串...无空格)。如果是，请将它们分开三个出来，如果之后还有什么，就把它放进去自己的输入。
3. 如果中间 block 不是以语法开头，则将整个第 5 个输入中的字符串
4. 以最后一个时间码结束

如果第五个输入可以 trim 掉任何分隔符，那就有好处了。就像“- End Title”将是第三行的“End Title”。

感谢您的想法!

Answer 1

这是您可以使用的一些内容，其余的应该非常简单。 Javascript 中有许多不同的函数可用于查询和操作字符串，我使用了不同的函数，以便您将来可以引用。

01:00:17:02.28  1m01 Main Title  00:02:32:17.47
01:22:04:15.77  Hit at 1:22:30   00:00:20:10.01
01:26:23:17.60  1M2s - End Title     00:01:22:14.01

如果您复制上面的内容，并将其粘贴到文本字段中，然后单击按钮，它应该根据您的条件对字符串进行排序。

function niceFunction() {
  var test = document.getElementById("test").value;
  var div1 = document.getElementById("div1");
  var awesomeObjects = doCoolThingsWithString(test);
  for(var x = 0; x<=2; x++){
  	div1.innerHTML = div1.innerHTML + " | first segment = " +awesomeObjects[x].first;
    div1.innerHTML = div1.innerHTML + " | second segment = " + awesomeObjects[x].second;
    
    if(awesomeObjects[x].fourth){
    	div1.innerHTML = div1.innerHTML + " | third segment = " +awesomeObjects[x].third;
    	div1.innerHTML = div1.innerHTML + " | fourth segment = " +awesomeObjects[x].fourth + "</br>";
    }
    else{
    	div1.innerHTML = div1.innerHTML + " | third segment = " +awesomeObjects[x].third+ "</br>";
    }
  }
}
document.getElementById("clickMe").onclick = niceFunction;
function doCoolThingsWithString(string) {
  var test = string;
  var doubleSplit = [];
  test = test.replace(/\n\r?/g, '|');
  test = test.replace('-','');
  test = test.split("|");
  //test = test.match(/\S+/g);

  for (var x = 0; x <= test.length - 1; x++) {
    var temp = test[x].match(/\S+/g);
    if (isNaN(parseInt(temp[1].substring(0, 1)))) {
      var second = temp[1] + " " + temp[2] + " " + temp[3];
      doubleSplit.push({
        "first": temp[0],
        "second": second,
        "third": temp[4],
        "bool": isNaN(parseInt(temp[1].substring(0, 1)))
      });
    } else {
      var third = temp[2] + " " + temp[3];
      doubleSplit.push({
        "first": temp[0],
        "second": temp[1],
        "third": third,
        "fourth": temp[4],
        "bool": isNaN(parseInt(temp[1].substring(0, 1)))
      });
    }
  }
  //test = test[5];
  return doubleSplit;
}

<textarea rows="4" cols="50" id="test">
</textarea>
<div id="div1"></div>

<input id="clickMe" type="button" value="clickme" />

一些解释:

• 获取文本框值
• 用明显的字符替换换行符，在我的例子中|(replace函数)
• 根据您的要求删除-(replace功能)
• 按 | 字符拆分字符串(split 函数)
• split 函数创建一个数组，例如索引 0 为 01:00:17:02.28 1m01 Main Title 00:02:32:17.47...
• 循环数组并使用match函数获取所有非空白(存储为数组)
• 检查第二个索引的第一个字符是否为 NaN(不是数字)
• 如果不是数字，则实现一项要求
• 否则实现其他要求
• 将其存储在字典列表中以便于访问
• 使用 createElement 函数创建标签，如下所示 var x = document.createElement("TABLE");