javascript - 尝试使用 jquery-csv 解析 Mustache.js 模板的 csv 时出现语法错误

Question

我正在尝试使用 PHP 回显 CSV 文件的内容，然后使用 jquery-csv 解析它。使用 Mustache.js 模板中的数据。我已经尝试过 Papa Parse，虽然它能够解析数据并填充模板，但它似乎破坏了正在使用的同位素库。

代码:

<script>
    var result = $.csv.toObjects(<?php echo $data ?>);
    (function() {
        var template = $('#template').html(),
            output = Mustache.to_html(template, {
                array: result
            });
        $('.isotope').append(output);
    })();
</script>

当我尝试此操作时，收到错误“未捕获的语法错误:参数列表后缺少 )”。当我使用jquery-csv demo时，当从 php echo 复制并粘贴源代码中出现的 $data 时，我可以让它工作:

category,name,preferred,diversity,phone,email,website,info
appliances,Best Buy,,,(414) ###-####,name@email.com,http://www.website.edu/,"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima unde ullam illum quibusdam similique vel, modi dolorem provident quasi quisquam, quis architecto commodi enim excepturi asperiores quas, et numquam nesciunt, voluptas error accusamus! Distinctio autem, molestias, iure cumque quae ab?"
appliances,Grand Appliance,,,(414) ###-####,name@email.com,http://www.website.edu/,"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima unde ullam illum quibusdam similique vel, modi dolorem provident quasi quisquam, quis architecto commodi enim excepturi asperiores quas, et numquam nesciunt, voluptas error accusamus! Distinctio autem, molestias, iure cumque quae ab?"
architectural,Korb Tredo Architects Inc,preferred,,(414) ###-####,name@email.com,http://www.website.edu/,"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima unde ullam illum quibusdam similique vel, modi dolorem provident quasi quisquam, quis architecto commodi enim excepturi asperiores quas, et numquam nesciunt, voluptas error accusamus! Distinctio autem, molestias, iure cumque quae ab?"
armored,Dunbar Armored,preferred,,(414) ###-####,name@email.com,http://www.website.edu/,"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima unde ullam illum quibusdam similique vel, modi dolorem provident quasi quisquam, quis architecto commodi enim excepturi asperiores quas, et numquam nesciunt, voluptas error accusamus! Distinctio autem, molestias, iure cumque quae ab?"
audio-visual,CDW-G,,,(414) ###-####,name@email.com,http://www.website.edu/,"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima unde ullam illum quibusdam similique vel, modi dolorem provident quasi quisquam, quis architecto commodi enim excepturi asperiores quas, et numquam nesciunt, voluptas error accusamus! Distinctio autem, molestias, iure cumque quae ab?"
audio-visual,Full Compass Systems LTD,,,(414) ###-####,name@email.com,http://www.website.edu/,"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima unde ullam illum quibusdam similique vel, modi dolorem provident quasi quisquam, quis architecto commodi enim excepturi asperiores quas, et numquam nesciunt, voluptas error accusamus! Distinctio autem, molestias, iure cumque quae ab?"

Answer 1

发生这种情况是因为您将原始的、不带引号的字符串注入(inject)到 JavaScript 代码中。输出的 HTML 源代码中的 JavaScript 应如下所示:

<script>
    var result = $.csv.toObjects(category,name,preferred,diversity,phone,email,website,info
appliances,Best Buy,,,(414) ###-####,name@email.com,http://www.website.edu/,"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima unde ullam illum quibusdam similique vel, modi dolorem provident quasi quisquam, quis architecto commodi enim excepturi asperiores quas, et numquam nesciunt, voluptas error accusamus! Distinctio autem, molestias, iure cumque quae ab?"
appliances,Grand Appliance,,,(414) ###-####,name@email.com,http://www.website.edu/,"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima unde ullam illum quibusdam similique vel, modi dolorem provident quasi quisquam, quis architecto commodi enim excepturi asperiores quas, et numquam nesciunt, voluptas error accusamus! Distinctio autem, molestias, iure cumque quae ab?"
architectural,Korb Tredo Architects Inc,preferred,,(414) ###-####,name@email.com,http://www.website.edu/,"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima unde ullam illum quibusdam similique vel, modi dolorem provident quasi quisquam, quis architecto commodi enim excepturi asperiores quas, et numquam nesciunt, voluptas error accusamus! Distinctio autem, molestias, iure cumque quae ab?"
armored,Dunbar Armored,preferred,,(414) ###-####,name@email.com,http://www.website.edu/,"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima unde ullam illum quibusdam similique vel, modi dolorem provident quasi quisquam, quis architecto commodi enim excepturi asperiores quas, et numquam nesciunt, voluptas error accusamus! Distinctio autem, molestias, iure cumque quae ab?"
audio-visual,CDW-G,,,(414) ###-####,name@email.com,http://www.website.edu/,"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima unde ullam illum quibusdam similique vel, modi dolorem provident quasi quisquam, quis architecto commodi enim excepturi asperiores quas, et numquam nesciunt, voluptas error accusamus! Distinctio autem, molestias, iure cumque quae ab?"
audio-visual,Full Compass Systems LTD,,,(414) ###-####,name@email.com,http://www.website.edu/,"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima unde ullam illum quibusdam similique vel, modi dolorem provident quasi quisquam, quis architecto commodi enim excepturi asperiores quas, et numquam nesciunt, voluptas error accusamus! Distinctio autem, molestias, iure cumque quae ab?");
    (function() {
        var template = $('#template').html(),
            output = Mustache.to_html(template, {
                array: result
            });
        $('.isotope').append(output);
    })();
</script>

这不是有效的 JavaScript。

如MonkeyZeus注释中提到，您需要引用它，以便它在 JavaScript 代码中显示为字符串。这样做会导致不同的语法错误的原因是 CSV 文件包含换行符，换行符在单引号或双引号 JavaScript 字符串内无效，因此它被解释为代码行的结尾，并且该行被视为未终止的字符串，导致语法错误。

有几种方法可以解决这个问题。如果您的所有目标浏览器都支持 ES6，则修复将相当简单，只需用 ` template string 引用它即可。 ，允许换行。

var result = $.csv.toObjects(<?php echo '`' . $data . '`' ?>);

为了安全起见，您应该避免任何反引号:

var result = $.csv.toObjects(<?php echo '`' . sr_replace('`', '\`', $data) . '`' ?>);

如果您需要支持 ES5，事情会变得更加复杂。正如 MonkeyZeus 建议的那样，您需要转义单引号，但您还需要转义换行符和/或回车符:

var result = $.csv.toObjects(<?php echo "'" . str_replace('\n', '\\n', str_replace('\r\n', '\n', str_replace("'", "\\'", $data) . "'"; ?>);

在 ES5 中应该可行的一种可能更简单的方法是对字符串进行 JSON 编码，然后在 JavaScript 中对其进行解码:

var result = $.csv.toObjects(JSON.parse(<?php echo "'" . json_encode($data) . "'" ?>));