我有一个传入的txt / csv文件,其中包含很多信息(58列),基本上,我将需要处理一些信息(仅是姓名和电话号码)。因此,我必须能够获取全部信息,从中获取所需信息,然后对其进行格式化。
的HTML
<link href="https://fonts.googleapis.com/css?family=Lato|Roboto|Source+Code+Pro" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/monokai.min.css">
<link rel="stylesheet" href="demo.css">
<div class="row" style="margin-bottom:8px;position:relative;">
<h2>Contacts</h2>
<div class="col-md-12">
<label for="input-file">Select your file:</label><br>
<input type="file" id="input-file">
<input id="run" type="button" value="Format" />
</div>
</div>
<textarea id="content-target"></textarea>
<textarea id="result"></textarea>
<script src="http://code.jquery.com/jquery-3.3.1.slim.js" integrity="sha256-fNXJFIlca05BIO2Y5zh1xrShK3ME+/lYZ0j+ChxX2DA=" crossorigin="anonymous"></script>
<script src="http://typeiii.github.io/jquery-csv/src/jquery.csv.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
<script src="jquery-csv.js"></script>
JS
<script>
$("#content-target").hide();
$("#result").hide();
$("#run").hide();
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])
$("#run").show();
}
}
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)
})
}
// enable syntax highlighting
hljs.initHighlightingOnLoad();
$(document).ready(() => {
parse();
});
$('#run').bind('click', function () {
parse();
//format();
});
function parse() {
const input = $('#content-target').val();
const data = $.csv.toObjects(input);
$('#result').empty();
//$('#result').html(JSON.stringify(data, null, 2));
$("#result").show();
};
</script>
的格式()函数将接取该对象内的特定索引(I以上名字和电话号码中提到的那些),并执行一个正则表达式的操作进行格式化。但是正如我所说,我无法访问这些索引,在我的特定情况下,我认为语法data [0] .Name或诸如data [index] .ColumnName之类的通用名称应该很好。
这是我的传入数据的一小部分样本:
Name;Given Name;Additional Name;Family Name;Yomi Name;Given Name Yomi;Additional Name Yomi;Family Name Yomi;Name Prefix;Name Suffix;Initials;Nickname;Short Name;Maiden Name;Birthday;Gender;Location;Billing Information;Directory Server;Mileage;Occupation;Hobby;Sensitivity;Priority;Subject;Notes;Language;Photo;Group Membership;E-mail 1 - Type;E-mail 1 - Value;E-mail 2 - Type;E-mail 2 - Value;Phone 1 - Type;Phone 1 - Value;Phone 2 - Type;Phone 2 - Value;Phone 3 - Type;Phone 3 - Value;Address 1 - Type;Address 1 - Formatted;Address 1 - Street;Address 1 - City;Address 1 - PO Box;Address 1 - Region;Address 1 - Postal Code;Address 1 - Country;Address 1 - Extended Address;Organization 1 - Type;Organization 1 - Name;Organization 1 - Yomi Name;Organization 1 - Title;Organization 1 - Department;Organization 1 - Symbol;Organization 1 - Location;Organization 1 - Job Description;Website 1 - Type;Website 1 - Value
A1 Soluções;A1;;Soluções;;;;;;;;;;;;;;;;;;;;;;;;;* myContacts;;;;;Disp. móvel;8006009510;;;;;;;;;;;;;;;;;;;;;;;
Adelson;Adelson;;;;Adelson;;;;;;;;;;;;;;;;;;;;;;;* myContacts;;;;;Disp. móvel;027 99978-1045;;;;;;;;;;;;;;;Aluguel da Casa;;;;;;;;
Admilson;Admilson;;;;;;;;;;;;;;;;;;;;;;;;;;;* myContacts;;;;;Mobile;033 98888-1078;;;;;;;;;;;;;;;Paroquia Sagrado Coração de Jesus;;Bingo;;;;;;
异步调用存在一些问题。我修复了您的代码,因为只有当异步函数结束时(例如:fileReader.onload),您才能继续:
$("#content-target").hide();
$("#result").hide();
$("#run").hide();
document.getElementById('input-file').addEventListener('change', getFile)
function getFile(event) {
const input = event.target
if ('files' in input && input.files.length > 0) {
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent) {
//
// only after you read the file you can go on with the data...
//
var textFromFileLoaded = fileLoadedEvent.target.result;
$("#content-target").text(textFromFileLoaded).show();
$("#run").show();
parse();
}
fileReader.readAsText(input.files[0], "UTF-8");
}
}
function parse() {
const input = $('#content-target').text();
const data = $.csv.toObjects(input, {"separator": ";"});
$('#result tbody').empty();
data.forEach(function (e) {
// get arguments
var name = e.Name;
var phoneType = e['Phone 1 - Type'];
var phoneValue = e['Phone 1 - Value'];
// create a row and append to the table
$('#result tbody').append($('<tr><td>' + name + '</td><td>' + phoneType + ' </td><td>' + phoneValue + '</td></tr>'));
});
$("#result").show();
};
table, th, td {
border: 1px solid black;
border-collapse: collapse;
width: 33%;
}
table {
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://typeiii.github.io/jquery-csv/src/jquery.csv.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato|Roboto|Source+Code+Pro" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/monokai.min.css">
<div class="row" style="margin-bottom:8px;position:relative;">
<h2>Contacts</h2>
<div class="col-md-12">
<label for="input-file">Select your file:</label><br>
<input type="file" id="input-file">
<input id="run" type="button" value="Format"/>
</div>
</div>
<textarea id="content-target"></textarea>
<table id="result">
<thead>
<tr>
<th>name</th>
<th>Phone Type</th>
<th>Phone Value</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句