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

这几天我一直在尝试单独学习JavaScript，并利用我的时间为客户开发一个“单词合并”。这个想法是用户可以输入关键字，点击“合并”按钮，它将吐出所有可能的组合。此处可以看到该想法的工作版本：

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

此代码获取textareas的所有值，并将它们“合并”到一个规则中。在这里你可以看到我的结果。现在它显示：

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

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

保持健康，

---

卢克

好吧，如果不是荷兰侨民。。。在寻找我自己问题的解决方案时发现了您的问题，但我决定尽快为您解决“解决方案”

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

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

<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个文本区域将放入所有要组合的单词，每个换行符（新行、回车键等）将被拆分。文本中的空格和空格不计算在内。在那里，我添加了一些字段，比如分隔符和包装器，你可以硬编码一些按钮，但这也可以。该按钮在下一位调用函数，调用函数后，textarea-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>

函数genCombi（）{
var array1=document.getElementById（'textarea-1'）.value.split（'\n'）；//获取与ID对应的文本字段
var array2=document.getElementById（'textarea-2'）.value.split（'\n'）；
var array3=document.getElementById（'textarea-3'）.value.split（'\n'）；
var resultArray=[]；//生成空数组。
var resultField=document.getElementById（'textarea-r'）；//获取结果字段
var separator=document.getElementById（'separator'）.value；//获取分隔符
var lWrapper=document.getElementById（'lWrapper'）.value；//获取两个包装器
var rWrapper=document.getElementById（'rWrapper'）.value；
for（i=0；i

我们在这里所做的是逐个循环遍历每个条目，然后添加第二个和第三个条目。我将把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); 
            }
        }
    }

（i=0；i 对于（x=0；x 现在我知道这不是最好的解决方案，您可以使用其中的HTML部分作为示例（但我不建议使用
标记作为间距）。这些可能是更好的解决方案，但在我看来，这是一个容易制作，易于理解，并易于扩展，如果需要的话

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

如果要在窗体上检测到输入时运行该函数，可以将oninput=“genCombi（）”添加到窗体标记中：

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

工作代码段+代码：

函数genCombi（）{
var array1=document.getElementById（'textarea-1'）.value.split（'\n'）；//获取与ID对应的文本字段
var array2=document.getElementById（'textarea-2'）.value.split（'\n'）；
var array3=document.getElementById（'textarea-3'）.value.split（'\n'）；
var resultArray=[]；//生成空数组。
var resultField=document.getElementById（'textarea-r'）；//获取结果字段
var separator=document.getElementById（'sepa