Question

我有一个文本文件，想在浏览器中对它进行一些查找和替换操作。不幸的是，我的编码经验实际上是非常基础的，目前关于构建Web应用程序的完整教程是太多的输入。

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

我已经阅读过HTML5文件API，实际上可以将文本文件加载到浏览器中。但这就是我迷路的地方。为了将问题分解成更小的问题，我认为下一步将是再次下载上传的文件，最后学习如何在其间进行查找和替换操作。但我真的不知道如何走得更远，并希望得到任何帮助。

到目前为止，谢谢。尼

＆＃13;

document.getElementById('input-file')
  .addEventListener('change', getFile)

function getFile(event) {
	const input = event.target
  if ('files' in input && input.files.length > 0) {
	  placeFileContent(
      document.getElementById('content-target'),
      input.files[0])
  }
}

function placeFileContent(target, file) {
	readFileContent(file).then(content => {
  	target.value = content
  }).catch(error => console.log(error))
}

function readFileContent(file) {
	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")
  })
}

＆＃13;

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

＆＃13;

screenshot of text file uploader

Answer 1

您可以在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

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

1 个答案: