Hello im trying to load all file names from a folder.
im using this script and it returns a response object called data. When i use console.log on data it returns me to html below. how can i now collect all the file names out of there and write it into the variable fileNames?
my script:
var fileNames= "";
var folder = "csvData/";
$.ajax({
type: 'GET',
url: folder,
success: function(data){
console.log(data);
},
async:false
});
html inside of data response: a the bottom you can see that a function is called for each file in the folder.
<!DOCTYPE html>
<html dir="ltr" lang="de">
<head>
<meta charset="utf-8">
<meta name="color-scheme" content="light dark">
<meta name="google" value="notranslate">
<script>
function addRow(name, url, isdir,
size, size_string, date_modified, date_modified_string) {
if (name == "." || name == "..")
return;
var root = document.location.pathname;
if (root.substr(-1) !== "/")
root = "/";
var tbody = document.getElementById("tbody");
var row = document.createElement("tr");
var file_cell = document.createElement("td");
var link = document.createElement("a");
link.className = isdir ? "icon dir" : "icon file";
if (isdir) {
name = name "/";
url = url "/";
size = 0;
size_string = "";
} else {
link.draggable = "true";
link.addEventListener("dragstart", onDragStart, false);
}
link.innerText = name;
link.href = root url;
file_cell.dataset.value = name;
file_cell.appendChild(link);
row.appendChild(file_cell);
row.appendChild(createCell(size, size_string));
row.appendChild(createCell(date_modified, date_modified_string));
tbody.appendChild(row);
}
function onDragStart(e) {
var el = e.srcElement;
var name = el.innerText.replace(":", "");
var download_url_data = "application/octet-stream:" name ":" el.href;
e.dataTransfer.setData("DownloadURL", download_url_data);
e.dataTransfer.effectAllowed = "copy";
}
function createCell(value, text) {
var cell = document.createElement("td");
cell.setAttribute("class", "detailsColumn");
cell.dataset.value = value;
cell.innerText = text;
return cell;
}
function start(location) {
var header = document.getElementById("header");
header.innerText = header.innerText.replace("LOCATION", location);
document.getElementById("title").innerText = header.innerText;
}
function onHasParentDirectory() {
var box = document.getElementById("parentDirLinkBox");
box.style.display = "block";
var root = document.location.pathname;
if (!root.endsWith("/"))
root = "/";
var link = document.getElementById("parentDirLink");
link.href = root "..";
}
function sortTable(column) {
var theader = document.getElementById("theader");
var oldOrder = theader.cells[column].dataset.order || '1';
oldOrder = parseInt(oldOrder, 10)
var newOrder = 0 - oldOrder;
theader.cells[column].dataset.order = newOrder;
var tbody = document.getElementById("tbody");
var rows = tbody.rows;
var list = [], i;
for (i = 0; i < rows.length; i ) {
list.push(rows[i]);
}
list.sort(function(row1, row2) {
var a = row1.cells[column].dataset.value;
var b = row2.cells[column].dataset.value;
if (column) {
a = parseInt(a, 10);
b = parseInt(b, 10);
return a > b ? newOrder : a < b ? oldOrder : 0;
}
// Column 0 is text.
if (a > b)
return newOrder;
if (a < b)
return oldOrder;
return 0;
});
// Appending an existing child again just moves it.
for (i = 0; i < list.length; i ) {
tbody.appendChild(list[i]);
}
}
// Add event handlers to column headers.
function addHandlers(element, column) {
element.onclick = (e) => sortTable(column);
element.onkeydown = (e) => {
if (e.key == 'Enter' || e.key == ' ') {
sortTable(column);
e.preventDefault();
}
};
}
function onl oad() {
addHandlers(document.getElementById('nameColumnHeader'), 0);
addHandlers(document.getElementById('sizeColumnHeader'), 1);
addHandlers(document.getElementById('dateColumnHeader'), 2);
}
window.addEventListener('DOMContentLoaded', onl oad);
</script>
<style>
h1 {
border-bottom: 1px solid #c0c0c0;
margin-bottom: 10px;
padding-bottom: 10px;
white-space: nowrap;
}
table {
border-collapse: collapse;
}
th {
cursor: pointer;
}
td.detailsColumn {
padding-inline-start: 2em;
text-align: end;
white-space: nowrap;
}
a.icon {
padding-inline-start: 1.5em;
text-decoration: none;
user-select: auto;
}
a.icon:hover {
text-decoration: underline;
}
a.file {
background : url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAABnRSTlMAAAAAAABupgeRAAABEElEQVR42nRRx3HDMBC846AHZ7sP54BmWAyrsP588qnwlhqw/k4v5ZwWxM1hzmGRgV1cYqrRarXoH2w2m6qqiqKIR6cPtzc3xMSML2Te7XZZlnW7Pe/91/dX47WRBHuA9oyGmRknzGDjab1ePzw8bLfb6WRalmW4ip9FDVpYSWZgOp12Oh3nXJ7nxoJSGEciteP9y fH52q1euv38WosqA6T2gGOT44vry7BEQtJkMAMMpa6JagAMcUfWYa4hkkzAc7fFlSjwqCoOUYAF5RjHZPVCFBOtSBGfgUDji3c3jpibeEMQhIMh8NwshqyRsBJgvF4jMs/YlVR5KhgNpuBLzk0OcUiR3CMhcPaOzsZiAAA/AjmaB3WZIkAAAAASUVORK5CYII=") left top no-repeat;
}
a.dir {
background : url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABt0lEQVR42oxStZoWQRCs2cXdHTLcHZ6EjAwnQWIkJyQlRt4Cd3d3d1n5d7q7ju1zv/q mh6taQsk8fn29kPDRo87SDMQcNAUJgIQkBjdAoRKdXjm2mOH0AqS PlkP8sfp0h93iu/PDji9s2FzSSJVg5ykZqWgfGRr9rAAAQiDFoB1OfyESZEB7iAI0lHwLREQBcQQKqo8p gNUCguwCNAAUQAcFOb0NNGjT BbUC2YsHZpWLhC6/m0chqIoM1LKbQIIBwlTQE1xAo9QDGDPYf6rkTpPc92gCUYVJAZjhyZltJ95f3zuvLYRGWWCUNkDL2333McBh4kaLlxg aTmyL7c2xTjkN4Bt7oE3DBP/3SRz65R/bkmBRPGzcRNHYuzMjaj fdnaFoJUEdTSXfaHbe7XNnMPyqryPcmfY zURaAB7SHk9cXSH4fQ5rojgCAVIuqCNWgRhLYLhJB4k3iZfIPtnQiCpjAzeBIRXMA6emAqoEbQSoDdGxFUrxS1AYcpaNbBgyQBGJEOnYOeENKR/iAd1npusI4C75/c3539 nbUjOgZV5CkAU27df40lH agUdIuA/EAgDmZnwZlhDc0wAAAABJRU5ErkJggg==") left top no-repeat;
}
a.up {
background : url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACM0lEQVR42myTA w1RxRHz zftmrbdlTbtq04qRGrCmvbDWp9tq3a7tPcub8mj9XZ3eHOGQdJAHw77/LbZuvnWy c/CIAd 91CMf3bo bgcBiBAGIZKXb19/zodsAkFT 3px ssYfyHTQW5tr05dCOf3xN49KaVX9 2zy1dX4XMk 5JflN5MBPL30oVsvnvEyp 18Nt3ZAErQMSFOfelCFvw0HcUloDayljZkX MmamTAMTe d ltZ 1wEaRAX/MAnkJdcujzZyErIiVSzCEvIiq4O83AG7LAkwsfIgAnbncag82jfPPdd9RQyhPkpNJvKJWQBKlYFmQA315n4YPNjwMAZYy0TgAweedLmLzTJSTLIxkWDaVCVfAbbiKjytgmm EGpMBYW0WwwbZ7lL8anox/UxekaOW544HO0ANAshxuORT/RG5YSrjlwZ3lM955tlQqbtVMlWIhjwzkAVFB8Q9EAAA3AFJ DR3DO/Pnd3NPi7H117rAzWjpEs8vfIqsGZpaweOfEAAFJKuM0v6kf2iC5pZ9 fmLSZfWBVaKfLLNOXj6lYY0V2lfyVCIsVzmcRV9Y0fx02eTaEwhl2PDrXcjFdYRAohQmS8QEFLCLKGYA0AeEakhCCFDXqxsE0AQACgAQp5w96o0lAXuNASeDKWIvADiHwigfBINpWKtAXJvCEKWgSJNbRvxf4SmrnKDpvZavePu1K/zu/due1X/6Nj90MBd/J2Cic7WjBp/jUdIuA8AUtd65M PzXIAAAAASUVORK5CYII=") left top no-repeat;
}
html[dir=rtl] a {
background-position-x: right;
}
#parentDirLinkBox {
margin-bottom: 10px;
padding-bottom: 10px;
}
</style>
<title id="title"></title>
</head>
<body>
<h1 id="header">Index von LOCATION</h1>
<div id="parentDirLinkBox" style="display:none">
<a id="parentDirLink" >
<span id="parentDirText">[übergeordnetes Verzeichnis]</span>
</a>
</div>
<table>
<thead>
<tr id="theader">
<th id="nameColumnHeader" tabindex=0 role="button">Name</th>
<th id="sizeColumnHeader" tabindex=0 role="button">
Größe
</th>
<th id="dateColumnHeader" tabindex=0 role="button">
Änderungsdatum
</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
</body>
</html>
<script>// Copyright (c) 2012 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
/**
* @fileoverview This file defines a singleton which provides access to all data
* that is available as soon as the page's resources are loaded (before DOM
* content has finished loading). This data includes both localized strings and
* any data that is important to have ready from a very early stage (e.g. things
* that must be displayed right away).
*
* Note that loadTimeData is not guaranteed to be consistent between page
* refreshes (https://crbug.com/740629) and should not contain values that might
* change if the page is re-opened later.
*/
/** @type {!LoadTimeData} */
// eslint-disable-next-line no-var
var loadTimeData;
class LoadTimeData {
constructor() {
/** @type {?Object} */
this.data_ = null;
}
/**
* Sets the backing object.
*
* Note that there is no getter for |data_| to discourage abuse of the form:
*
* var value = loadTimeData.data()['key'];
*
* @param {Object} value The de-serialized page data.
*/
set data(value) {
expect(!this.data_, 'Re-setting data.');
this.data_ = value;
}
/**
* @param {string} id An ID of a value that might exist.
* @return {boolean} True if |id| is a key in the dictionary.
*/
valueExists(id) {
return id in this.data_;
}
/**
* Fetches a value, expecting that it exists.
* @param {string} id The key that identifies the desired value.
* @return {*} The corresponding value.
*/
getValue(id) {
expect(this.data_, 'No data. Did you remember to include strings.js?');
const value = this.data_[id];
expect(typeof value !== 'undefined', 'Could not find value for ' id);
return value;
}
/**
* As above, but also makes sure that the value is a string.
* @param {string} id The key that identifies the desired string.
* @return {string} The corresponding string value.
*/
getString(id) {
const value = this.getValue(id);
expectIsType(id, value, 'string');
return /** @type {string} */ (value);
}
/**
* Returns a formatted localized string where $1 to $9 are replaced by the
* second to the tenth argument.
* @param {string} id The ID of the string we want.
* @param {...(string|number)} var_args The extra values to include in the
* formatted output.
* @return {string} The formatted string.
*/
getStringF(id, var_args) {
const value = this.getString(id);
if (!value) {
return '';
}
const args = Array.prototype.slice.call(arguments);
args[0] = value;
return this.substituteString.apply(this, args);
}
/**
* Returns a formatted localized string where $1 to $9 are replaced by the
* second to the tenth argument. Any standalone $ signs must be escaped as
* $$.
* @param {string} label The label to substitute through.
* This is not an resource ID.
* @param {...(string|number)} var_args The extra values to include in the
* formatted output.
* @return {string} The formatted string.
*/
substituteString(label, var_args) {
const varArgs = arguments;
return label.replace(/\$(.|$|\n)/g, function(m) {
expect(m.match(/\$[$1-9]/), 'Unescaped $ found in localized string.');
return m === '$$' ? '$' : varArgs[m[1]];
});
}
/**
* Returns a formatted string where $1 to $9 are replaced by the second to
* tenth argument, split apart into a list of pieces describing how the
* substitution was performed. Any standalone $ signs must be escaped as $$.
* @param {string} label A localized string to substitute through.
* This is not an resource ID.
* @param {...(string|number)} var_args The extra values to include in the
* formatted output.
* @return {!Array<!{value: string, arg: (null|string)}>} The formatted
* string pieces.
*/
getSubstitutedStringPieces(label, var_args) {
const varArgs = arguments;
// Split the string by separately matching all occurrences of $1-9 and of
// non $1-9 pieces.
const pieces = (label.match(/(\$[1-9])|(([^$]|\$([^1-9]|$)) )/g) ||
[]).map(function(p) {
// Pieces that are not $1-9 should be returned after replacing $$
// with $.
if (!p.match(/^\$[1-9]$/)) {
expect(
(p.match(/\$/g) || []).length % 2 === 0,
'Unescaped $ found in localized string.');
return {value: p.replace(/\$\$/g, '$'), arg: null};
}
// Otherwise, return the substitution value.
return {value: varArgs[p[1]], arg: p};
});
return pieces;
}
/**
* As above, but also makes sure that the value is a boolean.
* @param {string} id The key that identifies the desired boolean.
* @return {boolean} The corresponding boolean value.
*/
getBoolean(id) {
const value = this.getValue(id);
expectIsType(id, value, 'boolean');
return /** @type {boolean} */ (value);
}
/**
* As above, but also makes sure that the value is an integer.
* @param {string} id The key that identifies the desired number.
* @return {number} The corresponding number value.
*/
getInteger(id) {
const value = this.getValue(id);
expectIsType(id, value, 'number');
expect(value === Math.floor(value), 'Number isn\'t integer: ' value);
return /** @type {number} */ (value);
}
/**
* Override values in loadTimeData with the values found in |replacements|.
* @param {Object} replacements The dictionary object of keys to replace.
*/
overrideValues(replacements) {
expect(
typeof replacements === 'object',
'Replacements must be a dictionary object.');
for (const key in replacements) {
this.data_[key] = replacements[key];
}
}
/**
* Reset loadTimeData's data. Should only be used in tests.
* @param {?Object} newData The data to restore to, when null restores to
* unset state.
*/
resetForTesting(newData = null) {
this.data_ = newData;
}
/**
* @return {boolean} Whether loadTimeData.data has been set.
*/
isInitialized() {
return this.data_ !== null;
}
}
/**
* Checks condition, throws error message if expectation fails.
* @param {*} condition The condition to check for truthiness.
* @param {string} message The message to display if the check fails.
*/
function expect(condition, message) {
if (!condition) {
throw new Error(
'Unexpected condition on ' document.location.href ': ' message);
}
}
/**
* Checks that the given value has the given type.
* @param {string} id The id of the value (only used for error message).
* @param {*} value The value to check the type on.
* @param {string} type The type we expect |value| to be.
*/
function expectIsType(id, value, type) {
expect(
typeof value === type, '[' value '] (' id ') is not a ' type);
}
expect(!loadTimeData, 'should only include this file once');
loadTimeData = new LoadTimeData;
// Expose |loadTimeData| directly on |window|, since within a JS module the
// scope is local and not all files have been updated to import the exported
// |loadTimeData| explicitly.
window.loadTimeData = loadTimeData;
console.warn('crbug/1173575, non-JS module files deprecated.');</script><script>loadTimeData.data = {"header":"Index von LOCATION","headerDateModified":"Änderungsdatum","headerName":"Name","headerSize":"Größe","language":"de","parentDirText":"[übergeordnetes Verzeichnis]","textdirection":"ltr"};</script><script>start("C:\\Users\\MYNAME-\\eclipse-workspace\\htmlCsvtable\\src\\htmlTableGeneration\\csvData\\");</script>
<script>onHasParentDirectory();</script>
<script>addRow("20220201221359.csv","20220201221359.csv",0,2959,"2.9 kB",1644181136,"06.02.22, 21:58:56");</script>
<script>addRow("20220206091030.csv","20220206091030.csv",0,2958,"2.9 kB",1644181136,"06.02.22, 21:58:56");</script>
<script>addRow("20220206135359.csv","20220206135359.csv",0,2959,"2.9 kB",1644181136,"06.02.22, 21:58:56");</script>
CodePudding user response：
It seems you want to extract the file names from the calls to addRow.
Here's an example of how to extract them using a regular expression.
const findFiles = (text) => {
let matches = [];
let match;
let regex = /addRow\("(.*?)"/g;
while (match = regex.exec(text)) {
matches.push(match[1]);
}
return matches;
};
// instead of this example "text" use the result from your AJAX call
const text = `<script>onHasParentDirectory();</scri` `pt><script>addRow("20220201221359.csv","20220201221359.csv",0,2959,"2.9 kB",1644181136,"06.02.22, 21:58:56");</scri` `pt><script>addRow("20220206091030.csv","20220206091030.csv",0,2958,"2.9 kB",1644181136,"06.02.22, 21:58:56");</scri` `pt><scri` `pt>addRow("20220206135359.csv","20220206135359.csv",0,2959,"2.9 kB",1644181136,"06.02.22, 21:58:56");</scri` `pt>`;
console.log(findFiles(text));CodePudding user response：
Since you're using jQuery you can just load the file and convert the response to a jQuery object. This gives you the ability to use jQuery's DOM traversal functions like $.find() etc.
$("#test").load( "csvData/", function(data) {
console.log($(data));
// $(data).find("#someselector")
// or use the regex answer here findFiles(data)
})The ID test is just a container to place results in or something like that.