Textdatei mit Javascript laden, manipulieren und speichern?

Ich habe eine Textdatei und möchte einige Such- und Ersetzungsoperationen innerhalb des Browsers durchführen. Leider ist meine Programmiererfahrung einfach wirklich elementar und komplette Tutorials zum Erstellen von Web-Apps sind im Moment viel zu viel Input.Textdatei mit Javascript laden, manipulieren und speichern?

Grundsätzlich möchte ich die Datei in den Browser hochladen, dann lasse Javascript das Find-and-Replace-Ding machen und möchte schließlich die geänderte Datei erneut herunterladen.

Ich habe bereits über die HTML5-Datei API gelesen und war tatsächlich in der Lage, die Textdatei in den Browser zu laden. Aber da bin ich verloren. Um Probleme in kleinere aufzuteilen, dachte ich, es wäre ein guter nächster Schritt, die hochgeladene Datei noch einmal herunterzuladen und schließlich zu lernen, wie man die Suche-und-Ersetzen-Aktion dazwischen stellt. Aber ich weiß wirklich nicht weiter und würde mich über jede Hilfe freuen.

Danke bis jetzt. Benny

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

Quelle

2017-05-30 Benjamin Dahl

Sie können eine Schaltfläche hinzufügen und eine Funktion in JavaScript aufrufen. So etwas wie

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

ist, um die Funktion

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

Innerhalb der Funktion sollten Sie in der Lage sein, alle Änderungen zu tun, die Sie wollen. Wenn Sie weitere Informationen zu geben, kann ich Ihnen mit dem Abschnitt ersetzen helfen, aber es sollte in etwa wie folgt sein: CodePen

content.replace(regex, substitute);

Weitere Informationen here

Arbeits

Quelle

2017-05-30 13:42:44

Hey Juan, das ist groß. Ich konnte mir nicht vorstellen, dass dies so einfach sein könnte, da ich noch nicht über all diese praktischen HTML-DOM-Methoden Bescheid wusste. Ich werde das Regex-Ding versuchen. Jedenfalls scheint es auch ganz einfach zu sein. Prost –

Keine Sorge, wir lernen alle =]. Nur stellen Sie sicher, dass Sie es als beantwortet markieren, wenn es Ihnen hilft, damit andere Leute auch davon profitieren können. –

In Ordnung, ich werde sobald ich die Regex-Funktion hinzugefügt habe. –

Textdatei mit Javascript laden, manipulieren und speichern?

Antwort

Verwandte Themen