如何将 textarea 元素值与 JavaScript 组合并将每个规则视为唯一组合？（包括示例）

Question

这几天我一直在努力学习JavaScript，并利用我的时间为客户开发'Word Merger'。这个想法是，用户可以输入关键字，然后单击 'Merge' 按钮，它将吐出所有可能的组合。可以在这里看到这个想法的工作版本：Merge Words by Toptal.

我编写了以下 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);
}

此代码将文本区域的所有值和 "merges" 它们放在一个规则中。在这个 screenshot 你可以看到我的结果。现在它显示：

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

好吧，如果不是荷兰外籍人士...在寻找解决我自己的问题之一时发现了您的问题，但我决定快速解决您的问题 'solution'。

您的代码存在的问题是您获取了每个文本区域的值而没有在换行符处拆分它们。这使得其中的所有文本都进入一个条目。您面临的第二个问题是您将所有值组合在一个结果中，创建一条大线而不将它们分开。解决方案是为每个字段中的每一行编制索引，然后将它们合并到每个条目中。

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

<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 个文本区域用于输入您要组合的所有单词，每个换行符（换行符、回车键等）将被拆分。文本中的白色 spaces 和 spaces 将不算数。在那里我添加了一些字段，例如分隔符和包装器，您可以对一些按钮进行硬编码，但这也可以。按钮在下一位调用函数，textarea-r 显示函数调用后的结果。您可以添加一个 If 语句来检查分隔符是否为空，或者只是将其硬编码为白色 space.

<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：如果有人发现任何错误或可以美化/改进此代码，请继续。

如何将 textarea 元素值与 JavaScript 组合并将每个规则视为唯一组合？（包括示例）

How to combine textarea element values with JavaScript and see every rule as unique combination? (Example included)

javascript

merge

textarea

如何将 textarea 元素值与 JavaScript 组合并将每个规则视为唯一组合？ （包括示例）

How to combine textarea element values with JavaScript and see every rule as unique combination? (Example included)

javascript

merge

textarea

如何将 textarea 元素值与 JavaScript 组合并将每个规则视为唯一组合？（包括示例）