时间戳

首页 > 解决方案 > 从多个值将多个 url 插入输入字段

javascript - 从多个值将多个 url 插入输入字段

问题描述

我有一个解析页面并获取一些参数以生成新 url 并将其插入到输入字段中的 fetch
getvalue1请求应该动态生成）？ 现在，带有表单的窗口不会生成value2value3

如果我break进入循环，代码会生成带有表单的窗口，但只显示一个 url

由于此代码应该是带有表单的窗口和带有 url 的三个输入字段

var url = 'google.com/page1'
fetch(url, {
        method: 'GET',
        credentials: 'include',
    })
    .then(function(response) {
        return response.text()
    })
    .then(function(html) {
            var parser = new DOMParser();
            var doc = parser.parseFromString(html, "text/html");
            var value4 = 'test4';
            var UrlArr = [];
            if (condition) {
                var name = doc.querySelectorAll("someClass");
                for (var i = 0; i < name.length; i++) {
                    var allNames = name[i].outerHTML;
                    var value1 = allNames.match('MyregExp1')[0];
                    var value2 = allNames.match('MyregExp2')[0];
                    var value3 = allNames.match('MYregExp3')[0];

                    var newUrl = `google.com/?${value1}&${value2}&${value3}&test=${value4}`;
                    //brake

                    console.log(value1);
                    // something1
                    // something2
                    // something3
                    // etc...

                    console.log(value2);
                    // something11
                    // something22
                    // something33
                    // etc...

                    console.log(value3);
                    // something111
                    // something222
                    // something333
                    // etc...


                    UrlArr.push(newUrl);
                    console.log(UrlArr);
                    //first-array
                    // [google.com/?something1&something2&$something3&test=test4]
                    // 0: google.com/?something1&something2&$something3&test=test4
                    // 1: google.com/?something11&something22&$something33&test=test4
                    // 2: google.com/?something111&something222&$something333&test=test4

                    // second-array
                    // [google.com/?something1&something2&$something3&test=test4,google.com/?something11&something22&$something33&test=test4 ]
                    // 0: google.com/?something1&something2&$something3&test=test4
                    // 1: google.com/?something11&something22&$something33&test=test4
                    // 2: google.com/?something111&something222&$something333&test=test4

                    // third-array
                    // [google.com/?something1&something2&$something3&test=test4,google.com/?something11&something22&$something33&test=test4,google.com/?something111&something222&$something333&test=test4]
                    // 0: google.com/?something1&something2&$something3&test=test4
                    // 1: google.com/?something11&something22&$something33&test=test4
                    // 2: google.com/?something111&something222&$something333&test=test4

                }
                if (allNames.length >= 2) {

                    var newForm = Ext.create('Ext.form.Panel', {
                        title: 'Form',
                        width: 250,
                        autoHeight: true,
                        autoScroll: true,
                        bodyPadding: 10,
                        id: 'Form',
                    });


                    function newRadio() {
                        var radio = new Ext.form.Radio({
                            height: 40,
                            labelWidth: 110,
                            width: 20,
                            name: 'url',
                        });
                        return radio;
                    }


                    function newTextArea(id) {
                        var textArea = new Ext.form.TextArea({
                            fieldLabel: i + '_url',
                            height: 30,
                            labelWidth: 110,
                            width: 330,
                            submitValue: false,
                            readOnly: true,
                            autoScroll: true,
                            id: id
                        });
                        return textArea;
                    }


                    for (i = 0; i < name.length; i++) {
                        var id = i;
                        id = 'field_' + id;
                        var field = newTextArea(id);
                        var radioGr = newRadio();
                        var cont = NewContainer();
                        field.setValue(UrlArr);
                        newForm.add(cont);
                    }

                    function NewContainer() {
                        var container = new Ext.container.Container({
                            xtype: 'container',
                            layout: 'hbox',
                            items: [radioGr, field]
                        });
                        return container;
                    }

                    var win = new Ext.Window({
                        title: "Window",
                        layout: 'fit',
                        modal: 'true',
                        height: 500,
                        width: 385,
                        items: [newForm],
                        buttons: [{
                            text: "Confirm",
                            handler: function() {
                                //something handler
                            }
                        }]
                    });
                    win.show();


                }
            }

标签： javascriptextjsfetch

解决方案

您提供的代码中存在一些问题，例如：

  1. Containerradio在和之前被创建textArea。
  2. 您的要求是在字段内设置 newUrl，但是已经有一个 for 循环，在该循环中该变量正在更新，并且它在 for 循环的范围内。因此，您可以将另一个变量定义为第一个 for 循环上方的数组，并将 URL 推入该数组中。

我已经修改了您的代码，请参阅下文并为您的案例提供了一个工作小提琴。

var url = 'google.com/page1'
fetch(url, {
        method: 'GET',
        credentials: 'include',
    })
    .then(function (response) {
        return response.text()
    })
    .then(function (html) {
        var parser = new DOMParser();
        var doc = parser.parseFromString(html, "text/html");
        var value4 = 'test4';
        var UrlArr = [];
        if (condition) {
            var name = doc.querySelectorAll("someClass");
            for (var i = 0; i < name.length; i++) {
                var allNames = name[i].outerHTML;
                var value1 = allNames.match('MyregExp1')[0];
                var value2 = allNames.match('MyregExp2')[0];
                var value3 = allNames.match('MYregExp3')[0];

                var newUrl = `google.com/?${value1}&${value2}&${value3}&test=${value4}`;

                console.log(value1);

                console.log(value2);

                console.log(value3);


                console.log(newUrl);
                UrlArr.push(newUrl);

            }
            if (allNames.length >= 2) {

                var newForm = Ext.create('Ext.form.Panel', {
                    title: 'Form',
                    width: 250,
                    autoHeight: true,
                    autoScroll: true,
                    bodyPadding: 10,
                    id: 'Form',
                });


                function newRadio() {
                    var radio = new Ext.form.Radio({
                        height: 40,
                        labelWidth: 110,
                        width: 20,
                        name: 'url',
                    });
                    return radio;
                }


                function newTextArea(id) {
                    var textArea = new Ext.form.TextArea({
                        fieldLabel: i + '_url',
                        height: 30,
                        labelWidth: 110,
                        width: 330,
                        submitValue: false,
                        readOnly: true,
                        autoScroll: true,
                        id: id
                    });
                    return textArea;
                }


                for (i = 0; i < name.length; i++) {
                    var id = i;
                    id = 'field_' + id;
                    var field = newTextArea(id);
                    var radioGr = newRadio();
                    var cont = NewContainer();
                    field.setValue(UrlArr[i]);
                    newForm.add(cont);
                }

                function NewContainer() {
                    var container = new Ext.container.Container({
                        xtype: 'container',
                        layout: 'hbox',
                        items: [radioGr, field]
                    });
                    return container;
                }

                var win = new Ext.Window({
                    title: "Window",
                    layout: 'fit',
                    modal: 'true',
                    height: 500,
                    width: 385,
                    items: [newForm],
                    buttons: [{
                        text: "Confirm",
                        handler: function () {}
                    }]
                });
                win.show();
            }
        }
    });

推荐阅读