javascript - 创建/附加包含包含引号的 blob 文本的元素

Question

我尝试传递一个 blob，如下所示:

  $("#recordingslist").append('<li><audio src="'+url+'"></audio><a target="_blank" href="'+url+'">'+new Date().toISOString() + '.wav'+'</a><button class="btn btn-primary" onclick="sendWaveToPost('+blob+', '+exercise_id+')">Send Exercise</button></li>');

不幸的是，这不会起作用。它会在 DOCTYPE 处给我一个意外的标识符。

但是以下方法有效..

  $("#recordingslist").append('<li><audio src="'+url+'"></audio><a target="_blank" href="'+url+'">'+new Date().toISOString() + '.wav'+'</a><button class="btn btn-primary" onclick="sendWaveToPost(\''+blob+'\', '+exercise_id+')">Send Exercise</button></li>');

注意 blob 周围的转义字符。

有人能解释一下吗？这对我来说毫无意义:(

Answer 1

blob 必须包含非有效 Javascript 表达式的内容。考虑一下 blob 包含类似 a a 的情况，然后不带引号:

sendWaveToPost(a a, 0)

而使用引号时:

sendWaveToPost('a a', 0)

如果 blob 包含 ' 字符并且您不转义它们，您仍然可能会遇到错误。如果 blob 有可能包含 ' 那么您应该转义它(也转义 \ 字符):

sendWaveToPost(\'' + blob.replace(/([\\'])/g, '\\$1') + '\', ...

这解决了其中包含 ' 或 \ 的 blob 问题，但还有其他情况可能会出错(例如 blob 中的换行符)并且当您添加所有情况时，转义将变得更加复杂。在生产代码中，您应该始终避免连接字符串来生成这样的代码，而应使用某种自动转义的模板。