用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

來源

2017-05-30 Benjamin Dahl

您可以添加一個按鈕並調用你的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

來源

2017-05-30 13:42:44

嘿胡安，這是大。我沒有想到，這可能很簡單，因爲我不知道所有這些方便的HTML DOM方法。我會嘗試正則表達式的東西。無論如何，它似乎也很簡單。歡呼 –

不用擔心，我們都在學習=]。只要確保您將它標記爲可以幫助您的答案，以便其他人也可以從中受益。 –

好的，我會盡快添加正則表達式函數。 –

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

回答

相關問題