Javascript 使用jQuery显示文本文件中的数据

我需要显示/附加文件file.txt中的数据，该文件包含以下格式的400行：

http://www.exemple.com/img1.jpg，标题1，副标题1，说明1；
http://www.exemple.com/img2.jpg，标题2，副标题2，说明2；
http://www.exemple.com/img3.jpg，标题3，副标题3，说明3；
http://www.exemple.com/img4.jpg，标题4，副标题4，说明4；
http://www.exemple.com/img5.jpg，标题5，副标题5，说明5；

我知道如何将一行附加到

中。但是，这里每行有4个元素。我需要把它们转换成4个元素，我可以用来显示它们

我正在使用这个jQuery代码段，它可以很好地处理每行1个元素，并在行尾拆分

$.get('file.txt', function(data) {
  //var fileDom = $(data);

  var lines = data.split("\n");

  $.each(lines, function(n, elem) {
    $('#display').append('<div><img src="' + elem + '"/></div>');
  });
});

$.get（'file.txt'，函数（数据）{
//var fileDom=$（数据）；
变量行=数据分割（“\n”）；
$。每个（行，函数（n，元素）{
$（'#display'）。追加（''）；
});
});

HTML输出将是：

$('#display').append('<div class="container"><div class="left"><img src="' + src + '"/></div><div class="right">' + title + '<br/>' + subtitle + '<br/>' + description + '</div></div>');

$（'#display'）。追加（''+title+'
'+subtitle+'
'+description+''）；

---

感谢您的见解

您可以第二次

拆分
：

$.each(lines, function(n, line) {
    // Breaks up each line into ['src', 'title', 'subtitle', 'description']
    var elements = line.split(', ');
    $('#display').append('<div><img src="' + elements[0] + '"/></div>');
});

$。每个（行，函数（n，行）{
//将每行拆分为['src'、'title'、'subtitle'、'description']
var元素=line.split（'，'）；
$（'#display'）。追加（''）；
});
您可以第二次
拆分
：

$.each(lines, function(n, line) {
    // Breaks up each line into ['src', 'title', 'subtitle', 'description']
    var elements = line.split(', ');
    $('#display').append('<div><img src="' + elements[0] + '"/></div>');
});

$。每个（行，函数（n，行）{
//将每行拆分为['src'、'title'、'subtitle'、'description']
var元素=line.split（'，'）；
$（'#display'）。追加（''）；
});
您可以在
''上拆分：

$.get('file.txt', function(data) {
    //var fileDom = $(data);

    var lines = data.split("\n");

    $.each(lines, function(line, elem) {
        var parts = line.split(', '), // this splits the line into pieces
            src = parts[0],
            title = parts[1],
            subtitle = parts[2],
            description = parts[3].slice(0, -1); // remove the ';' from the description

        // at this point, you have the pieces of your line and can do whatever
        // you want with the data

        $('#display').append('<div><img src="' + src + '"/></div>');
    });
});

$.get（'file.txt'，函数（数据）{
//var fileDom=$（数据）；
变量行=数据分割（“\n”）；
$。每个（行，函数（行，元素）{
var parts=line.split（“，”），//这会将行拆分为多个部分
src=零件[0]，
标题=零件[1]，
副标题=部分[2]，
description=零件[3]。切片（0，-1）；//从描述中删除“；”
//在这一点上，你有你的线路，可以做任何事情
//你想知道这些数据吗
$（'#display'）。追加（''）；
});
});
您可以在
''上拆分：

$.get('file.txt', function(data) {
    //var fileDom = $(data);

    var lines = data.split("\n");

    $.each(lines, function(line, elem) {
        var parts = line.split(', '), // this splits the line into pieces
            src = parts[0],
            title = parts[1],
            subtitle = parts[2],
            description = parts[3].slice(0, -1); // remove the ';' from the description

        // at this point, you have the pieces of your line and can do whatever
        // you want with the data

        $('#display').append('<div><img src="' + src + '"/></div>');
    });
});

$.get（'file.txt'，函数（数据）{
//var fileDom=$（数据）；
变量行=数据分割（“\n”）；
$。每个（行，函数（行，元素）{
var parts=line.split（“，”），//这会将行拆分为多个部分
src=零件[0]，
标题=零件[1]，
副标题=部分[2]，
description=零件[3]。切片（0，-1）；//从描述中删除“；”
//在这一点上，你有你的线路，可以做任何事情
//你想知道这些数据吗
$（'#display'）。追加（''）；
});
});
您的错误存在于拆分的过程中

您需要这样做，（
.when（file）
应替换为
.get（'file.txt'）
：


var文件=”http://www.exemple.com/img1.jpg，标题1，副标题1，说明1；http://www.exemple.com/img2.jpg，标题2，副标题2，说明2；http://www.exemple.com/img3.jpg，标题3，副标题3，说明3；http://www.exemple.com/img4.jpg，标题4，副标题4，说明4；http://www.exemple.com/img5.jpg，标题5，副标题5，说明5；“；
函数AppendImagesCtrl（$）{
$
//.get（'file.txt'）
.when（file）//这是假的
.then（file=>file.split（/；？\n？？/））
.然后（line=>line.map（（line，i）=>{
line=line.trim（）；
如果（！line）{return”“；}
让[
img，标题，副标题，描述
]=直线分割（/，？n°/）；
返回`
${title}
`;
}))
.then（视图=>$（“#示例”）.append（视图））
;  
}
window.jQuery（document）.ready（AppendImagesCtrl）；
img{宽度：100px；高度：50px；背景：青色；}
文章{填充：5px 10px；背景：lightseagreen；页边距底部：5px；}
您的错误存在于拆分的过程中

您需要这样做，（
.when（file）
应替换为
.get（'file.txt'）
：


var文件=”http://www.exemple.com/img1.jpg，标题1，副标题1，说明1；http://www.exemple.com/img2.jpg，标题2，副标题2，说明2；http://www.exemple.com/img3.jpg，标题3，副标题3，说明3；http://www.exemple.com/img4.jpg，标题4，副标题4，说明4；http://www.exemple.com/img5.jpg，标题5，副标题5，说明5；“；
函数AppendImagesCtrl（$）{
$
//.get（'file.txt'）
.when（file）//这是假的
.then（file=>file.split（/；？\n？？/））
.然后（line=>line.map（（line，i）=>{
line=line.trim（）；
如果（！line）{return”“；}
让[
img，标题，副标题，描述
]=直线分割（/，？n°/）；
返回`
${title}
`;
}))
.then（视图=>$（“#示例”）.append（视图））
;  
}
window.jQuery（document）.ready（AppendImagesCtrl）；
img{宽度：100px；高度：50px；背景：青色；}
文章{填充：5px 10px；背景：lightseagreen；页边距底部：5px；}

您想要什么输出？URL、标题、副标题、描述都在自己的行中？您有一个逗号分隔的字符串。您已经使用过一次。为什么不再次使用
elem.split（'，'）
将字符串拆分为您想要的药剂？@Summer Evans是的，输出将是每行的4个元素，并在“；”然后再这样做400次。看起来你已经得到了一些答案。另一次，请提供一个你希望最终得到的HTML的例子。例如：
title1
subtitle1
description1
将是第一行的一个可能的HTML结果。因此，我们必须猜测你想要的是什么@Summer Evans抱歉，你是对的…这正是我想要的HTML输出。你想要什么输出？URL、标题、副标题、描述都在自己的行中？你有一个逗号分隔的字符串。你需要