获取列表<String>，将它们拆分，然后使用JavaScript将它们分成几个部分

Getting values from list<String> , split them and then slice them by parts, using JavaScript

本文关键字：几个 JavaScript 拆分 String 列表 获取 然后      更新时间：2023-09-26

我有列表<String>从Spring MVC，我想分割，切片和打印在浏览器上。问题是我需要输入slice()方法的开始和结束参数作为文本字段的变量。这是我的代码，但它不起作用。有人能帮我一下吗?这是我的代码:

    <body>
    <form>First value:
        <br/>
        <input type="text" id="firstvalue" />Last value:
        <br/>
        <input type="text" id="lastvalue" />
        <button onclick="myFunction()">Press</button>
        <p id="demos"></p>
    </form>
    <script>
        function myFunction() {
            var str = "${first}";
            var arr = str.split(",");
            var first = document.getElementById('firstvalue');
            var second = document.getElementById('lastvalue');
            document.getElementById("demos").innerHTML = arr.slice('first', 'second');
        }
    </script>
</body>

提前感谢!

你的代码有一些问题。

  1. 如果${first}是List<String>，那么您需要将其转换为连接的单个逗号分隔的字符串。因为通过${first}，你只是打印列表对象。
  2. slice期望索引是数字，你正在传递字符串
  3. 你没有在document.getElementById后面做。value
  4. 你不是传递用户输入变量的第一和第二切片，相反，你是传递硬编码字符串'first'和'second'。
下面是固定代码 HTML 

<form>First value:
    <br/>
    <input type="text" id="firstvalue" />Last value:
    <br/>
    <input type="text" id="lastvalue" />
    <button onclick="myFunction(event)">Press</button>
    <p id="demos"></p>
</form>

JS 

var myFunction = function (e) { 
    var str = "${first}" // assuming this contains string like "1,2,3,4,5,6,7,8,9,10"; and not the List obect
    var arr = str.split(",");
    var first = document.getElementById('firstvalue').value;
    var second = document.getElementById('lastvalue').value;
    document.getElementById("demos").innerHTML = arr.slice(parseInt(first, 10),   parseInt(second, 10)).toString();
    e.preventDefault();
};

我们想要实现什么?

我们有两个输入文本域:一个保存起始值，一个保存结束值。在点击时，我们想要创建一个从开始值到结束值的范围，并将其输出到容器中。

解决方案

解决方案比预期的更简单，我们不需要分割，切片和部分。此外，我们并不真的需要一个预定义的列表来保存所有的值。

<html>
    <head>
        <script>
            function evalRange(){
                var tS = parseInt(document.querySelector('#inFrom').value); //Our start value;
                var tE = parseInt(document.querySelector('#inTo').value); //Our end value;
                var tR = document.querySelector('#demos'); //Our output div
                if (tE >= tS){
                    //We are using the Array.apply prototype to create a range
                    var tL = Array.apply(null, Array(tE - tS + 1)).map(function (a, i){return tS + i});
                    //We output the range into the demos div
                    tR.innerHTML = tL.join(',')
                }
                else tR.innerHTML = 'To has to be higher than from';
                //Returning the range list
                return tL
            }
        </script>
    </head>
    <body>
        <input type = 'text' id = 'inFrom' value = '10' />
        <input type = 'text' id = 'inTo' value = '20' />
        <b onclick = 'evalRange()'>Range</b>
        <div id = 'demos'></div>
    </body>
</html>

这里有一个小提琴:https://jsfiddle.net/91v3jg66/

相关文章：