来自 Javascript 的文本框数据答案

【问题标题】：Textbox data from Javascript来自 Javascript 的文本框数据
【发布时间】：2020-08-22 23:23:39
【问题描述】：

需要一点帮助。

以下脚本从文本框中选择值并将其添加到 URL。

示例：

文本框值：
一
二
三
四
五
六
七

输出网址：
https://www.google.com/search?q=one+two+three+four+five+six+seven

我需要的帮助：

我不需要将所有文本框值添加到 URL，而是需要将文本框值拆分为 5 的倍数并相应地拆分 URL

输出应该是：
https://www.google.com/search?q=one+two+three+four+five
https://www.google.com/search?q=six+seven

$(function () {
  $("#text1").click(function () {
    if ($('#textbox1').val() != '') {
      var search_container1 = $("#textbox1").val().split(" ");
      for (k = 0; k < search_container1.length; k++) {
        search_container1[k] = search_container1[k].replace(/\s/gi, "+");
      }
      var srcbox1 = "val1234";

      if (srcbox1 == "val1234") {
        var search_val1234 = "";
        for (var i = 0; i < search_container1.length; i++) {
          search_val1234 = search_container1[i];
          {
            window.open("https://www.google.com/search?client=firefox-b-d&q=" + search_val1234 + "");
          }
        }

      }
    }
    else if ($('#textbox1').val() == '') {
      alert("Enter Keyword");
    }
  });
});

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>textbox</title>
</head> 

<body>  
    <div class="container">

        <div class="col-sm">
                      <div class="card">
                      <div class="card-body"><center><a>Deal IDs</a></center>
                        <br>
                              <textarea id="textbox1" cols="5" rows="7"></textarea><br>
                        <center><br><button id="text1" class="btn btn-warning btn-block ">Submit</button></center>
                        </div>
                    </div>
                   </div>
    </div>


</body>

</html>

【问题讨论】：

如果您添加了 html 部分，使用可行的解决方案会更容易回答 - 您也可以将整个代码添加为有效的 JavaScript sn-p
添加了 HTML 部分

标签： javascript html html.textboxfor

【解决方案1】：

这里是 jsFiddle 链接，您可以参考它来获取您的解决方案。

$("#queryBtn").on('click', function(){
	let val = $("#inputTextArea").val();
  if(val){
  	const chunk = 5;
  	let valuesArray = val.toLowerCase().split(/[\s*\n*]/ig).filter((x) => x != "");
    console.log(valuesArray);
    let i,j,tArr;
    for (i=0,j=valuesArray.length; i<j; i+=chunk) {
        tArr = valuesArray.slice(i,i+chunk);
        window.open("https://www.google.com/search?q=" + tArr.join("+"));
    }
  }
});

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<div class="container">
  <h5>
  Enter values in textarea
  </h5>
  <textarea id="inputTextArea" class="form-control" aria-label="With textarea"></textarea>
  <br>
  <button type="button" id="queryBtn" class="btn btn-primary">Send</button>
</div>

尝试使用小提琴链接以使 window.open 工作 ===> JS-Fiddle Link

逐行解释代码-

首先使用 jquery id 选择器从文本区域获取值。
将块设置为等于 5（因为块大小为 5）。
从文本区域我们得到字符串，所以将字符串转换为小写，然后使用正则表达式，我们尝试用空格和换行符分割。然后通过管道将其传递给过滤函数，该函数删除数组中不必要的空字符串行话。
循环是块明智的，所以拼接数组块明智，然后用'+'字符连接它，然后传递给window.open。

玩弄代码并欢迎堆栈溢出:)

如果它解决了您的问题，请务必投票。

【讨论】：

你好.. @CFMathew 太好了.. 太棒了.. :)

【解决方案2】：

$(function() {
  $("#text1").click(function() {
    if ($("#textbox1").val() != "") {
      var search_container1 = $("#textbox1").val().replace(/\s+/g, "+");
      var search_container1 = search_container1.split("+"),
        len = search_container1.length;

      var search_val1234 = [];
      for (var i = 0, j = -1; i < len; i++) {
        if (i % 5 == 0) {
          search_val1234[++j] = "";
        }
        search_val1234[j] += search_container1[i] + "+";
      }

      for (var i = 0; i < search_val1234.length; i++)
        window.open("https://www.google.com/search?client=firefox-b-d&q=" + search_val1234[i]);

    } else if ($("#textbox1").val() == "") alert("Enter Keyword");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="textbox1" />
<button id="text1">Search</button>

【讨论】：