将文本文件解析为数组？答案

【问题标题】：Parse a text file into an array?将文本文件解析为数组？
【发布时间】：2014-01-12 21:37:34
【问题描述】：

我目前有 3 个文件；它们在我计算机上的同一目录中：

project.html
javascript.js
文本.txt

“project.html”中的代码

<html>
<head>
    <link href="style.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="javascript.js">
    </script>
    <script
        //calling the Google Maps API
    </script>

    <script>
        //code to initialize Google Maps
    </script>
</head>

<body>
    <div class="content">
        <div id="googleMap"></div>
        <div id="right_pane_results">hi</div>
        <div id="bottom_pane_options">
            <button onclick="get_parameters()">Try It</button>
        </div>
    </div>
</body>
</html>

“javascript.js”中的代码

function get_parameters() {
    alert('hi');
    var xhr = new XMLHttpRequest();

    xhr.addEventListener('readystatechange', (output) => {
      if (xhr.readyState === 4) {
        var response = xhr.responseText;
        callback(response);
      }
    });

    xhr.open('GET', 'text.txt', true);
    xhr.send();
}

“text.txt”中的文本

等等...（接近 150 行）

最后，我想将“text.txt”解析为一个数组，并使用该数组创建一个包含数组内容的选项菜单。我发布了一个问题，询问我是否可以使用 JavaScript 解析文件，但由于安全问题，答案是否定的。 JavaScript代码是我尝试过但没有奏效的。也就是说，我可以使用另一种语言来读取文件并创建选项菜单吗？

我最终希望在“project.html”文件中包含这样的内容（如下）：

<select>
    <option value="1">Line 1 of File</option>
    <option value="2">Line 2 of File</option>
    <option value="3">Line 3 of File</option>
        <!-- etc... -->
</select>

注意事项：

所有文件不是在服务器上，而是在我的计算机上运行（所以我猜像 PHP 这样的服务器大小的语言不是一个选项）
我想根据“text.txt”中的内容自动创建一个选项菜单
文件在同一目录中
我不希望用户能够选择读取哪个文件。 “text.txt”是由我制作的另一个程序制作并填充的文件，并且可能会更改；这就是我想在每次页面加载时读取文件的原因。

【问题讨论】：

仅供参考，如果您的页面在file:// 协议而不是http:// 下运行，您的AJAX 请求可能由于javascript 安全沙盒而无法工作。如果您没有服务器，请尝试 MAMP 或 WAMP（我相信免费）来设置本地 Web 堆栈。
你遇到了什么错误？
不清楚你在问什么。您需要splitting 对数组响应的帮助吗？
即使您的文件只是在您的计算机上运行，您仍然可以在本地设置 XAMPP 或 WAMPP 或其他任何东西以便能够使用 PHP。
这很难吗？这个项目将在 5 天内到期，所以我想使用不会占用太多时间的东西。

标签： javascript html arrays file-io local

【解决方案1】：

如果您可以调整浏览器设置，那么您没有理由不能仅使用 javascript 来执行此操作。下面是一个使用 jQuery 的示例，您可以将其转换为纯 Javascript，但这需要更多代码。

$(document).ready(function() {
    //fetch text file
    $.get('text.txt', function(data) {
        //split on new lines
        var lines = data.split('\n');
        //create select
        var dropdown = $('<select>');
        //iterate over lines of file and create a option element
        for(var i=0;i<lines.length;i++) {
            //create option
            var el = $('<option value="'+i+'">'+lines[i]+'</option>');
            //append option to select
            $(dropdown).append(el);
        }
        //append select to page
        $('body').append(dropdown);
    });
});

它在 IE10 上运行良好，只有一个对话框询问我是否要运行被阻止的内容。其他浏览器可能需要也可能不需要其他安全设置才能使其正常工作。

【讨论】：

【解决方案2】：

如果您没有 Web 服务器，则无法执行标准 XHR 请求：XHR 请求涉及对您没有的 Web 服务器执行 HTTP 请求。

来自XMLHttpRequest specification：

一些实现支持除 HTTP 和 HTTPS 之外的协议，但本规范未涵盖该功能

因此，一些浏览器通过自动将 XHR 请求转换为“正常”文件加载来支持 file 协议，但您需要做的工作可能因浏览器而异，我不鼓励您遵循该路径。

最好的解决方案是使用轻量级 Web 服务器并将其与您的应用程序一起分发。

一旦您可以向 Web 服务器发出 AJAX 请求，检索文件内容并使用 split 获取行数组。我假设从现在开始你知道如何遍历数组并修改 DOM。

您提到要为这个项目着急。也许您可以在您的应用程序中包含 jQuery 以使您的生活更轻松。

【讨论】：

我刚刚注意到这个问题有多老了。 :-) 我希望它可以帮助别人..

【解决方案3】：

或原版：

function get_parameters() {
alert('hi');
var xhr = new XMLHttpRequest();

xhr.addEventListener('readystatechange', (output) => {
  if (xhr.readyState === 4) {
    var response = xhr.responseText;
    var lines = response.split('\n');
    var i = 0;
    var select = document.createElement('select');
    do
    {
      var option = document.createElement('option');
      option.value = i;
      option.text = lines[i];
      select.appendChild(option);
      i++;
    }while(i<lines.length);
    document.body.appendChild(select);
  }
});

xhr.open('GET', 'text.txt', true);
xhr.send();
}

【讨论】：