如何将textarea元素值与JavaScript结合起来，并将每个规则视为唯一的组合?(包括示例)

Question

这几天我一直在孤立地学习JavaScript，并利用我的时间为客户开发"Word Merger"。其想法是，用户可以键入关键字，通过单击"合并"按钮，它将吐出所有可能的组合。这个想法的一个工作版本可以在这里看到：Toptal的Merge Words。

我已经编写了以下JavaScript代码：

function mergeWords() {
var first = document.getElementById('firstTextarea').value;
var second = document.getElementById('secondTextarea').value;
var third = document.getElementById('thirdTextarea').value;
var allResults = first + ' ' + second + ' ' + third;
var element = document.createElement('div');
var textResults = document.createTextNode(allResults);
element.setAttribute('id', 'allResults');
element.setAttribute('class', 'text-muted');
element.appendChild(textResults);
document.getElementById('mergeResults').appendChild(element);
}

此代码获取文本区域的所有值，并将它们"合并"在一个规则中。在这个屏幕截图中，你可以看到我的结果。现在显示：

Amsterdam The Hague Rotterdam Barber Haircut

但我想把它改成：

Amsterdam Barber Haircut
The Hague Barber Haircut
Rotterdam Barber Haircut

如果一个值被添加到(例如(第三个文本区域，假设值men被添加。结果应该是：

Amsterdam Barber Haircut
Amsterdam Barber Men
The Hague Barber Haircut
The Hague Barber Men
Rotterdam Barber Haircut
Rotterdam Barber Men

希望我能把这个想法说得足够清楚，如果有人能帮我，我将不胜感激。

保持健康，卢克

Answer 1

好吧，如果不是荷兰侨民。。。在为我自己的一个问题寻找解决方案时发现了你的问题，但我决定迅速为你找到一个"解决方案"。

代码的问题在于，您可以获得每个文本区域的值，而无需在换行处对其进行拆分。这使得其中的所有文本都进入一个条目中。你面临的第二个问题是，你将所有的值组合在一个结果中，创建一条大线而不拆分它们。解决方法是对每个字段中的每一行进行索引，然后将它们按每个条目进行组合。

我将逐步解释我的简单解决方案：

<form action="" id="combiForm">
<textarea id="textarea-1" rows="4" cols="50" name="comment" placeholder="Each enter makes a new input line..."></textarea>
<textarea id="textarea-2" rows="4" cols="50" name="comment" placeholder="Each enter makes a new input line..."></textarea>
<textarea id="textarea-3" rows="4" cols="50" name="comment" placeholder="Each enter makes a new input line..."></textarea>
<br>
<input type="text" id="separator" name="separator" placeholder="Input will be used as separator..."> <!--Used as seperator between each word-->
<br><br>
<input type="text" id="lWrapper" name="wrapper" placeholder="Left wrapper...">
<br>
<input type="text" id="rWrapper" name="wrapper" placeholder="Right wrapper...">
<br><br> <!--Wrappers above are the first and last characters of the output (for example { and })-->
</form>
<button onclick="genCombi()">Click</button>
<br>
<p>Combinations: <span id="comboCount"></span></p>
<h2>The result:</h2>
<textarea id="textarea-r" rows="50" cols="50" name="comment" placeholder="The result after clicking..."></textarea>

基本上，我对所有输入字段进行了硬编码，前3个文本区域将放入你想要组合的所有单词，每个换行符(新行、回车键等(都将被拆分。空白和文本中的空格将不计算在内。在那里我添加了一些字段，比如seperator和wrappers，你可以硬编码一些按钮，但这也很有效。按钮调用下一位中的函数，文本区域-r显示调用函数后的结果。您可以添加一个If语句来检查分隔符是否为空，或者只是将其硬编码为空白。

<script>
function genCombi() {
var array1 = document.getElementById('textarea-1').value.split('n'); //Getting the textfield corresponding to the ID
var array2 = document.getElementById('textarea-2').value.split('n');
var array3 = document.getElementById('textarea-3').value.split('n');
var resultArray = []; //Making of an empty array.
var resultField = document.getElementById('textarea-r'); //Getting the result field
var separator = document.getElementById('separator').value; //Getting the seperator
var lWrapper = document.getElementById('lWrapper').value; //Getting of both wrappers
var rWrapper = document.getElementById('rWrapper').value;
for (i = 0; i < array1.length; i++) {  //The for loops to go through the first result of the first textfield, then the second result and then to add all third results.
for (x = 0; x < array2.length; x++) {
for (y = 0; y < array3.length; y++) {
resultArray.push(lWrapper + array1[i] + separator + array2[x] + separator + array3[y] + rWrapper);    //Pushing to the resultArray we defined before.  
}
}
}
resultField.value = resultArray.join("n"); //Adding every single array row to a new row in the resultfield, hence the "n"
document.getElementById("comboCount").innerHTML = resultArray.length; //Checking howmany rows we have and adding them to the combination counter span. Could also add a var to the first for loop and use that.
}   
</script>

我们在这里所做的是一个接一个地循环遍历每个条目，并添加第二个和第三个条目。我将在for循环上放大一点：

我们在这里做的如下：我们进入第一个循环，而在第一次迭代中，我们进入第二个循环，在第一次循环中，我们仍然进入第三个循环。第三个循环遍历所有可能的条目，然后返回到第二个循环。当第二个循环完成后，它将返回到第一个循环。通过这样做，我们或多或少是在从前到后地工作。

for (i = 0; i < array1.length; i++) { 
for (x = 0; x < array2.length; x++) {
for (y = 0; y < array3.length; y++) {
resultArray.push(lWrapper + array1[i] + separator + array2[x] + separator + array3[y] + rWrapper); 
}
}
}

现在我知道这不是最好的解决方案，HTML部分可以用作示例(但我不建议使用
标记作为间距(。可能是更好的解决方案，但在我看来，这一解决方案易于制作、易于理解，并且在需要时易于扩展。

例如，您可以通过制作一个创建另一个元素的按钮来添加另一个文本字段，或者使用PHP For、while或任何其他类型的循环(例如，如果您使用Wordpress(来动态添加更多字段。

如果您想在表单上检测到输入时运行该函数，可以将oninput="genCombi(("添加到表单标签：

最后，我希望代码对你有用，如果有任何问题，比如它是如何工作的，或者你是如何编辑/扩展/更改某些部分的，请告诉我。

工作片段+代码：

function genCombi() {
var array1 = document.getElementById('textarea-1').value.split('n'); //Getting the textfield corresponding to the ID
var array2 = document.getElementById('textarea-2').value.split('n');
var array3 = document.getElementById('textarea-3').value.split('n');
var resultArray = []; //Making of an empty array.
var resultField = document.getElementById('textarea-r'); //Getting the result field
var separator = document.getElementById('separator').value; //Getting the seperator
var lWrapper = document.getElementById('lWrapper').value; //Getting of both wrappers
var rWrapper = document.getElementById('rWrapper').value;
for (i = 0; i < array1.length; i++) {  //The for loops to go through the first result of the first textfield, then the second result and then to add all third results.
for (x = 0; x < array2.length; x++) {
for (y = 0; y < array3.length; y++) {
resultArray.push(lWrapper + array1[i] + separator + array2[x] + separator + array3[y] + rWrapper);    //Pushing to the resultArray we defined before.  
}
}
}
resultField.value = resultArray.join("n"); //Adding every single array row to a new row in the resultfield, hence the "n"
document.getElementById("comboCount").innerHTML = resultArray.length; //Checking howmany rows we have and adding them to the combination counter span. Could also add a var to the first for loop and use that.
}

<form action="" id="combiForm" oninput="genCombi()">
<textarea id="textarea-1" rows="4" cols="50" name="comment" placeholder="Each enter makes a new input line..."></textarea>
<textarea id="textarea-2" rows="4" cols="50" name="comment" placeholder="Each enter makes a new input line..."></textarea>
<textarea id="textarea-3" rows="4" cols="50" name="comment" placeholder="Each enter makes a new input line..."></textarea>
<br>
<input type="text" id="separator" name="separator" placeholder="Input will be used as separator...">
<br><br>
<input type="text" id="lWrapper" name="wrapper" placeholder="Left wrapper...">
<br>
<input type="text" id="rWrapper" name="wrapper" placeholder="Right wrapper...">
<br><br>
</form>
<button onclick="genCombi()">Click</button>
<br>
<p>Combinations: <span id="comboCount"></span></p>
<h2>The result:</h2>
<textarea id="textarea-r" rows="50" cols="50" name="comment" placeholder="The result after clicking..."></textarea>

屏幕截图：https://prnt.sc/s5hby8

Ps：如果有人发现任何错误，或者可以美化/改进这个代码，那就继续吧。