javascript 将文本文件解析为数组？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21080605/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Parse a text file into an array?
提问by user3015565
I currently have 3 files; they are in the same directory on my computer:
我目前有 3 个文件；它们在我电脑的同一个目录中：
- project.html
- javascript.js
- text.txt
- 项目.html
- javascript.js
- 文本文件
Code in 'project.html'
'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>
Code in 'javascript.js'
'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 in 'text.txt'
'text.txt' 中的文本
- Iron
- Aluminum
- Steel
- 铁
- 铝
- 钢
etc... (close to 150 lines)
等等...（接近 150 行）
At the end of everything, I would like to parse 'text.txt' into an array and use that array to create an option menu with the array's content. I have posted a question asking whether I can parse the file using JavaScript and the answer was no due to security issues. The JavaScript code is what I have tried but has not worked. That said, is there another language I can use to read the file and create the option menu?
最后，我想将 'text.txt' 解析为一个数组，并使用该数组创建一个包含该数组内容的选项菜单。我发布了一个问题，询问我是否可以使用 JavaScript 解析文件，由于安全问题，答案是否定的。JavaScript 代码是我尝试过但没有奏效的代码。也就是说，我可以使用另一种语言来读取文件并创建选项菜单吗？
I would eventually like to have something like this (below) in the 'project.html' file:
我最终希望在“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>
Some things to keep in mind:
要记住的一些事情：
- All files are noton a server but are rather running from my computer (so I'd guess server-size languages like
PHParen't an option) - I would like to auto-create an option menu based on the content in 'text.txt'
- The files are in the same directory
- I would not like the user to be able to choose which file to read. 'text.txt' is a file that is made from and filled by another program I have made and is likely to change; that's why I want to read the file every time the page loads.
- 所有文件都不在服务器上，而是从我的计算机上运行（所以我猜服务器大小的语言
PHP不是一种选择） - 我想根据“text.txt”中的内容自动创建一个选项菜单
- 文件在同一个目录下
- 我不希望用户能够选择要读取的文件。'text.txt' 是一个由我制作的另一个程序制作和填充的文件，可能会改变；这就是为什么每次页面加载时我都想读取文件的原因。
回答by Danny
If you can tweak browser settings there is no reason why you can't do this with just javascript. Below is an example using jQuery, you could convert it to plain Javascript but that would take a lot more code.
如果您可以调整浏览器设置，那么您就没有理由不能仅使用 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);
});
});
It worked fine on IE10 with just a dialog asking if I wanted blocked content to run. Other browsers may or maynot need other security settings played with to get it to work.
它在 IE10 上运行良好，只有一个对话框询问我是否想要运行被阻止的内容。其他浏览器可能需要也可能不需要其他安全设置才能使其工作。
回答by Domenico De Felice
If you have no web server, you can't do standard XHR requests: XHR requests involve performing HTTP requests towards a web server, that you don't have.
如果您没有 Web 服务器，则无法执行标准 XHR 请求：XHR 请求涉及向您没有的 Web 服务器执行 HTTP 请求。
From the XMLHttpRequest specification:
some implementations support protocols in addition to HTTP and HTTPS, but that functionality is not covered by this specification
除了 HTTP 和 HTTPS 之外，一些实现还支持协议，但本规范不涵盖该功能
Therefore some browsers supports the fileprotocol by automatically converting XHR requests to "normal" file loads, but what you need to do to make it work can vary from browser to browser and I discourage you to follow that path.
因此，某些浏览器file通过自动将 XHR 请求转换为“正常”文件加载来支持该协议，但是您需要做什么才能使其工作因浏览器而异，我不鼓励您遵循该路径。
The best solution is to use a lightweight web server and distribute it with your application.
最好的解决方案是使用轻量级 Web 服务器并将其与您的应用程序一起分发。
Once you can do AJAX requests to your web server, retrieve the file contents and obtain the array of lines using split. I'm assuming that from this point on you know how to iterate over the array and modify the DOM consequently.
一旦您可以向您的 Web 服务器发出 AJAX 请求，请检索文件内容并使用split获取行数组。我假设从现在开始您知道如何迭代数组并因此修改 DOM。
You mentioned to be in a hurry for this project. Probably you could include jQuery in your application to make your life easier.
你提到要赶这个项目。也许您可以在应用程序中包含 jQuery 以使您的生活更轻松。
回答by Kilian Hertel
or vanilla:
或香草：
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();
}
