Javascript 使用单引号将参数传递给函数

我正在使用这个代码段

str += '<div class="section clear">' + 
    '<span><img src="' + pic_square + '" alt="" width="32px" height="32px" /></span>' + 
    '<span class="user_name">' + rows.data[i].name + '</span>' + 
    '<a href="#" class="blue_button blue_button_small flt_right" style="line-height: 16px; height: 18px; margin: 6px 15px 0 0;" onclick="showSelected(' + details + '); return false;">Select</a>' + 
'</div>';

str+=''
'' + 
''+行.数据[i].名称+''
'' + 
'';

---

此处“详细信息”参数可能包含单引号。在这种情况下，它会显示错误。如何解决此问题？

获取所有可能包含单引号的变量，并对其应用以下内容：

str = str.replace(/(['"])/g, "\\$1");

这将逃避你所有的引用。然后，您可以按原样在函数中使用变量

或者，您可以创建一个函数来执行此操作：

function escapeStrQuotes(str)
{
  return str.replace(/(['"])/g, "\\$1");
}

然后像这样使用：

str += '<div class="section clear">' + 
    '<span><img src="' + escapeStrQuotes(pic_square) + '" alt="" width="32px" height="32px" /></span>' + 
    '<span class="user_name">' + escapeStrQuotes(rows.data[i].name) + '</span>' + 
    '<a href="#" class="blue_button blue_button_small flt_right" style="line-height: 16px; height: 18px; margin: 6px 15px 0 0;" onclick="showSelected(' + escapeStrQuotes(details) + '); return false;">Select</a>' + 
'</div>';

str+=''
'' + 
''+EscapeStrestQuotes（rows.data[i].name）+''+
'' + 
'';

让jQuery来做转义变量内容的繁重工作：

//用于测试目的
var pic_square='#'，
行={
数据：[{name:'foo'}]
},
详细信息='bla'，
i=0；
已选择功能显示（详细信息）
{
警报（详情）；
}
$(' \

使用jQuery很容易！
所有这些HTML和正则表达式的混合都是不好的。您使用的是jQuery，就用jQuery的方式

另外，我不确定为什么参数会有撇号，但如果它的值有撇号，那么尝试使用

在循环中创建元素，并将信息分配到它所属的位置。操作如下：

var details = rows.data[i].details, //  simply guessing at some form of how you got your param
    //  beging creating your elements. First, the div.section, which appears to be your wrapper, this will come into play later
    section = $('<div />', { class: 'section clear' }),
    //  now to create the image element. I know yours is wrapped in a span, but I'll show you a quick add for that a little later
    img = $('<img />', { alt: '', height: '32', src: pic_square, width: '32' }),
    //  now for your username span, I'm assuming this is your label
    userName = $('<span />', { class: 'user_name', text: rows.data[i].name }),
    //  here I create your link, notice I don't add the "onclick" method yet, just wait,
    //  going to show you use of apply
    lnkSelect = $('<a />', {
        class: 'blue_button blue_button_small flt_right',
        href: 'javascript:void(0)',
        style: 'line-height: 16px; height: 18px; margin: 6px 15px 0 0;',
        text: 'Select'
    });

//  Here is where it all comes together
//  jQuery's append/prepend methods are very powerful,
//  Notice you can join multiple elements in another with just simple comma separation,
//  You'll also notice that IMG span wrapper I was talking about earlier coming back!
section.append(
    //  First element in your div.section is the image, but alas! we need that SPAN tag around it!
    //  I simply use jQuery to create a SPAN tag and then append the image to it! Viola!
    $('<span />').append(img),
    //  Now to append that username span
    userName,
    //  finally, add the link clicker!
    lnkSelect
).appendTo($('body'));  //  this Trixy part is like "append", except it adds this element to whatever we pass in the selector! Thus, "appendTo"

//  Finally! The onclick value!
//  Since you mentioned some trixy stuff with the "details",
// I make use of ".apply", which you can pass parameters
//  through as a value in an array in the second param of apply
//  see more at: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply
lnkSelect.on('click', function(e) { showSelected.apply(this, [details]) })

var details=rows.data[i].details，//简单地猜测一下您是如何获得参数的
//开始创建您的元素。首先，div.section，它似乎是您的包装器，这将在以后发挥作用
section=$（''，{class:'section clear'}），
//现在来创建图像元素。我知道你的元素被包装在一个跨度中，但稍后我会为你展示一个快速添加
img=$（“”，{class:'user_name'，text:rows.data[i].name}），
//这里我创建了你的链接，注意我还没有添加“onclick”方法，等等，
//将向您展示apply的用法
lnkSelect=$（''{
课程：“蓝色按钮蓝色按钮小右”，
href:'javascript:void（0）'，
样式：“行高：16px；高度：18px；边距：6px 15px 0；”，
文本：“选择”
});
//这就是一切的结合点
//jQuery的append/prepend方法非常强大，
//注意，只需简单的逗号分隔，就可以将多个元素连接到另一个元素中，
//您还将注意到，我在回来之前提到的IMG span包装器！
第1节附加(
//div.section中的第一个元素是图像，但是唉！我们需要在它周围加上SPAN标记！
//我只需使用jQuery创建一个SPAN标记，然后将图像附加到它！Viola！
$（''）。附加（img），
//现在添加用户名span
用户名，
//最后，添加链接点击器！
印度选举
).appendTo（$（'body'）；//这个三叉部分类似于“append”，只是它将这个元素添加到我们在选择器中传递的任何内容中！因此，“appendTo”
//最后！onclick值！
//既然你提到了一些关于“细节”的三部曲，
//我使用“.apply”，可以传递参数
//通过作为应用程序第二个参数中数组中的值
//更多信息，请访问：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply
lnkSelect.on（'click'，函数（e）{showSelected.apply（此[details]））

举个简单的例子，在这里使用您的值类型和我的代码，运行下面的代码段


$（函数（）{
var pic_square='../img/logo.png'，
行={
数据：[
{名称：'Bob'，详细信息：'Bob'sPlace'}，
{姓名：'Diana'，详情：'Diana的小屋}，
{名字：'杰瑞'，细节：'杰瑞·阿特里克的惊心动魄'}]
},
str=''；
功能显示已选择（值）{
警报（值）；
}
$.each（行、数据、函数（i）{
var details=this.details，
section=$（''，{class:'section clear'}），
img=$（“”，{class:'user_name'，text:this.name}），
lnkSelect=$（''{
课程：“蓝色按钮蓝色按钮小右”，
href:'javascript:void（0）'，
样式：“行高：16px；高度：18px；边距：6px 15px 0；”，
文本：“选择”
});
第1节附加(
$（''）。附加（img），
用户名，
印度选举
).appendTo（$（'#BODY'））；//使用id为“BODY”的div
lnkSelect.on（'click'，函数（e）{showSelected.apply（此[details]））
})
})

出现了什么错误？顺便说一下，您可能应该将引号转过来，以便“同时包装字符串”用于属性值。使用“而不是”.str+=”“而不是str+=''问题在于细节变量。将
'
字符替换为
\'
主题外的字符-但这是一个很好的演示，说明为什么将JS混合到HTML中通常是最好的避免方法。现在它显示了未捕获的语法错误：意外的标记非法，听起来像是我看不见的复制/粘贴中的不可见字符。Try删除代码并重新添加，直到出现错误。识别代码后，您可能必须将其删除并手动键入。