Question

如何基于单个字符“ |”将“ document.getElementById（“ demo”）。innerHTML = xhttp.responseTex“拆分为不同的标记ID？

以下是我正在寻找的图片： https://i.ibb.co/njTD8XS/1.png

我尝试了两件事，但失败了（可能是因为我不知道自己在做什么）。

我尝试的第一件事-在“ document.getElementById（“ demo”）。innerHTML = xhttp.responseText“ 的末尾添加“ .slice（0，50）”

（viewer.js）

    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
           // Typical action to be performed when the document is ready:
           document.getElementById("demo").innerHTML = xhttp.responseText.slice(0,         50);
           document.getElementById("demo2").innerHTML = xhttp.responseText.slice(50, 100);
           document.getElementById("demo3").innerHTML = xhttp.responseText.slice(100, 150);
           document.getElementById("demo4").innerHTML = xhttp.responseText.slice(150, 200);
           document.getElementById("demo5").innerHTML = xhttp.responseText.slice(200, 250);
           document.getElementById("demo6").innerHTML = xhttp.responseText.slice(250, 300);
        }
    };
    xhttp.open("GET", "https://cors-anywhere.herokuapp.com/https://f373f63d.ngrok.io/nowplaying.txt?_=" + new Date().getTime(), true);
    xhttp.send();

（panel.html）

    <div id="demo1"></div>
    <div id="demo2"></div>
    <div id="demo3"></div>
    <div id="demo4"></div>
    <div id="demo5"></div>
    <div id="demo6"></div>

此操作失败，因为文本信息有所不同，因此无法猜测切片的位置。我尝试在要从中提取文本文件的文本文件内添加大量空格，以查看是否有帮助，但是我认为xmlhttprequest会占用多余的空格，从而从网站导入数据。这意味着我将需要根据特定字符进行拆分。所以我在想把“ |”在文本文件中每行的末尾，因此我可以使用该字符将其下的下一行拆分。

我尝试过的第二件事-我尝试使用“ varfields =（“ demo”）。split（/ | /）;“尝试获取演示功能或文本文件，我将根据|提取并拆分它我在每行上都有一个字符。

（viewer.js）

    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
           // Typical action to be performed when the document is ready:
                  document.getElementById("demo").innerHTML = xhttp.responseText;
   var fields = ("demo").split(/|/);
   var title = fields[0];
   var filename = fields[1];
   var album = fields[2];
   var artists = fields[3];
   var date = fields[4];
   var description = fields[5];
   document.getElementById("demo2").innerHTML = album;
        }
    };
    xhttp.open("GET", "https://cors-anywhere.herokuapp.com/https://f373f63d.ngrok.io/nowplaying.txt?_=" + new Date().getTime(), true);
    xhttp.send();

（panel.html）

    <div id="demo1"></div>
    <div id="demo2"></div>

这失败了，因为我只从“ demo2”中一直得到字符“ m”，这使我产生了将单词“ demo”分开而不是从|字符。如果是这种情况，如何使字段变量具有文本文件的信息？

我希望有人能向我展示一个如何使用xmlhttprequest的示例，该示例将字符串基于单个字符拆分为不同的ID标签元素，从而知道在哪里拆分。（如果有任何意义）。

感谢您的时间，

Answer 1

正则表达式中的

|只是逻辑或。要用|字符分隔，只需运行myString.split('|')。

Answer 2

所以我想出了这个问题，它有点麻烦了，但是我使用@mbojko的想法来保留.split（'|'），只需要弄清楚如何使其在我的函数中起作用已经有。我基本上为http.responseText添加了一个变量，该变量从另一个Web服务器获取文本数据，然后使用该变量基于|进行拆分。字符。这是我更改的代码。再次感谢@mbojko和@Walk与我的时间和耐心。

    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
           // Typical action to be performed when the document is ready:
           console.log(xhttp.responseText)
           document.getElementById("demo").innerHTML = xhttp.responseText;
           var str = xhttp.responseText;
           var fields = str.split("|");
           var title = fields[0];
           var filename = fields[1];
           var album = fields[2];
           var artists = fields[3];
           var date = fields[4];
           var description = fields[5];
           document.getElementById("demo1").innerHTML = title;
           document.getElementById("demo2").innerHTML = filename;
           document.getElementById("demo3").innerHTML = album;
           document.getElementById("demo4").innerHTML = artists;
           document.getElementById("demo5").innerHTML = date;
           document.getElementById("demo6").innerHTML = description;
        }
    };
    xhttp.open("GET", "https://cors-        anywhere.herokuapp.com/https://f373f63d.ngrok.io/nowplaying.txt?_=" + new         Date().getTime(), true);
    xhttp.send();

根据JavaScript中的字符将“ getElementById”拆分为多个字符串？

2 个答案: