用JavaScript加载，操作和保存文本文件？

问题描述：

我有一个文本文件，并希望在浏览器中执行一些查找和替换操作。不幸的是，我的编码体验只是非常基础的，关于构建Web应用程序的完整教程目前是太多的输入。用JavaScript加载，操作和保存文本文件？

基本上我想将文件上传到浏览器，然后让javascript执行find-and-replace-thing并最终再次下载更改后的文件。

我已阅读过关于HTML5 File API的内容，并且实际上能够将文本文件加载到浏览器中。但那是我迷失的地方。为了将问题分解为更小的问题，我认为下一步应该是再次下载上传的文件，最后学习如何将查找和替换操作置于其间。但我真的不知道如何走得更远，并希望得到任何帮助。

到目前为止感谢。尼

document.getElementById('input-file') 
 
    .addEventListener('change', getFile) 
 

 
function getFile(event) { 
 
\t const input = event.target 
 
    if ('files' in input && input.files.length > 0) { 
 
\t placeFileContent(
 
     document.getElementById('content-target'), 
 
     input.files[0]) 
 
    } 
 
} 
 

 
function placeFileContent(target, file) { 
 
\t readFileContent(file).then(content => { 
 
    \t target.value = content 
 
    }).catch(error => console.log(error)) 
 
} 
 

 
function readFileContent(file) { 
 
\t const reader = new FileReader() 
 
    return new Promise((resolve, reject) => { 
 
    reader.onload = event => resolve(event.target.result) 
 
    reader.onerror = error => reject(error) 
 
    reader.readAsText(file, "windows-1252") 
 
    }) 
 
}

<html> 
 
    <head> 
 
    <meta content="text/html; charset=ANSI" http-equiv="content-type"> 
 
    <title>Text file manipulator</title> 
 
    
 
    </head> 
 
    <body> 
 
    \t <h1>Text file manipulator</h1> 
 
    \t <p> 
 
    \t \t <input type="file" id="input-file"> 
 
\t \t </p> 
 
\t \t <p> 
 
\t \t <textarea id="content-target" style="width:440px;height:400px;"></textarea> 
 
\t \t </p> 
 
    </body> 
 
</html>

screenshot of text file uploader

答

您可以添加一个按钮并调用你的JavaScript功能。像

<button onclick="downloadText()">Download</button>

身为功能

function downloadText(){ 
    var content = document.getElementById('content-target').value; 
    var dl = document.createElement('a'); 
    dl.setAttribute('href', 'data:text/csv;charset=utf-8,' + 
    encodeURIComponent(content)); 
    dl.setAttribute('download', 'text.txt'); 
    dl.click(); 
}

功能里面的东西，你应该能够做到你想要的所有修改。如果你提供更多的细节，我可以帮你用它替换部分，但它应该是这样的：

content.replace(regex, substitute);

更多信息here

工作CodePen

嘿胡安，这是大。我没有想到，这可能很简单，因为我不知道所有这些方便的HTML DOM方法。我会尝试正则表达式的东西。无论如何，它似乎也很简单。欢呼 –

不用担心，我们都在学习=]。只要确保您将它标记为可以帮助您的答案，以便其他人也可以从中受益。 –

好的，我会尽快添加正则表达式函数。 –

用JavaScript加载，操作和保存文本文件？

相关推荐