logo标签列表

将文本文件解析成数组？

javascripthtmlarraysfile-iolocal
4

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

  • project.html
  • javascript.js
  • text.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'是由我制作并填充的另一个程序生成的文件，可能会更改；这就是为什么我希望每次页面加载时都能读取该文件。
1
请注意，如果您的页面运行在 file:// 协议下而不是 http://，由于 JavaScript 安全沙箱机制，您的 AJAX 请求可能无法正常工作。如果您没有服务器，请尝试使用 MAMP 或 WAMP（我相信它们是免费的）来设置本地 Web 堆栈。 - Adam Hopkinson
你得到了什么错误？ - markasoftware
不太清楚你的问题是什么。你需要帮助将响应拆分成一个数组吗？ - bfavaretto
即使您的文件只在计算机上运行，您仍然可以设置XAMPP或WAMPP或其他本地环境以使用PHP。 - Arnelle Balane
这个难度大吗？这个项目5天后到期，所以我想使用不会花费太多时间的工具。 - user3015565
3个回答
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上运行良好，只需一个对话框询问是否允许运行被阻止的内容。其他浏览器可能需要调整其他安全设置才能使其正常工作。
0

或者原始的：

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();
}
0

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

来自XMLHttpRequest规范：

一些实现支持除HTTP和HTTPS之外的协议，但该功能不在本规范范围内

因此，一些浏览器通过自动将XHR请求转换为“正常”的文件加载来支持file协议，但是使其工作所需的操作因浏览器而异，我不建议您这样做。

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

一旦您可以对Web服务器执行AJAX请求，请检索文件内容并使用split获取行数组。从这一点开始，我假设您知道如何迭代数组并相应地修改DOM。

您提到对此项目很着急。可能您可以在应用程序中包含jQuery以使生活更轻松。

我刚刚注意到这个问题已经很老了。 :-) 我希望它能帮助其他人.. - Domenico De Felice
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接