javascript - 如何在第二个文本区域中获得所需的输出？

Question

我想生成一些表格，我的想法是我想将此文本复制到我的第一个文本区域，名为:text，

33345677 RM  GW
456575 FAC GOG

在第二个文本区域中生成以下输出:out1

    "RBD|facebook|W|google|C|33345677~W~RM  GW" "dasd.wbs"
    "RBD|facebook|I|google|C|33345677~E~RM  GW" "dasd.wbs"
    "RBD|facebook|O|google|C|33345677~R~RM  GW" "dasd.wbs"
    "RBD|facebook|W|google|C|456575~W~FAC GOG" "dasd.wbs"
    "RBD|facebook|I|google|C|456575~E~FAC GOG" "dasd.wbs"
    "RBD|facebook|O|google|C|456575~R~FAC GOG" "dasd.wbs"

我需要在第一个文本区域的每行生成 3 个表格，规则是我有两个参数，第一个空格定义第一个参数的结尾，两个文本区域的代码如下:

<textarea cols="70" rows="15" id="text" ></textarea>
<div cols="70" rows="15" id="out1" ></div>

我想使用我构建的一个名为“生成表”的按钮来生成该表，

<div class="wrapper">
<button class="button buttom0" style="vertical-align:middle;background-color:Green" onclick="generateTables()"; ><span>Generate Tables</span></button>  
using the function called: generateTables,
function generateTables() {
var newText = document.getElementById("text").value;
document.getElementById("out1").innerHTML = newText;
}

问题是我不知道如何在第二个文本区域中显示上面所需的输出，因为我是网络编程的初学者，我习惯在 bash 中使用模板来完成它，我真的很感激任何克服这种情况的建议我写了下面的 jsfiddle 以便更清楚 https://jsfiddle.net/ncve6g1d/

我认为定义一个模板然后进行替换可能是个好主意，如下所示:

"RBD|facebook|W|google|C|[FIRSTPARAMETER]~W~[SECONDPARAMETER]" "dasd.wbs"
"RBD|facebook|I|google|C|[FIRSTPARAMETER]~E~[SECONDPARAMETER]" "dasd.wbs"
"RBD|facebook|O|google|C|[FIRSTPARAMETER]~R~[SECONDPARAMETER]" "dasd.wbs"

替换第一个参数和第二个参数，

Answer 1

您可以应用带有正则表达式的.replace():

var generate = document.getElementById('generate');
var input = document.getElementById('input');
var output = document.getElementById('output');

generate.onclick = function() {
  var text = input.value;
  text = text.replace(/(\S+)\s+(.*)/g, 
         '"RBD|facebook|W|google|C|$1~W~$2" "dasd.wbs"\n' +
         '"RBD|facebook|I|google|C|$1~E~$2" "dasd.wbs"\n' +
         '"RBD|facebook|O|google|C|$1~R~$2" "dasd.wbs"');
  output.textContent = text;
};

<textarea id="input" style="width:100%">33345677 RM  GW
456575 FAC GOG</textarea><br>
<button id="generate">Generate table</button><br>
<div id="output" style="width:100%; white-space:pre"></div>