JavaScript逸出'，“字元
[英]JavaScript escape '," characters
问题描述
我在标签的onclick内遇到转义'字符的问题
我试过用双引号和单引号引起来的字符串。 但是我仍然面对这个问题
for(i in result.MenuItems){
var itemName = result.MenuItems[i].name;
html+= "<a onclick=return \'itemDescr(\""+itemName+"\",\""+restName+"\")\'>"+
'
<div>
' +
'
<div>
'+
'
<div style="float:left;width:50%;">
<h3 style="color:orange">'+itemName+'</h3>
</div>
'+
'
</div>
'+
'
</div>
'+
'</a>';
}
html+='</div>';
上面的代码中的问题区域：html + =“” +'说如果名字或休止符有'，则该代码在实际调用该函数时会中断
最终的html看起来像：
::html:: <div id="items"><h1>Items</h1><a onclick=return
'itemDescr("Pho","Panda Garden")'><div><div><div
style="float:left;width:50%;"><h3
style="color:orange">Pho</h3></div></div></div></a><a onclick=return
'itemDescr("Chinese Dumplings","Panda Garden")'><div><div><div
style="float:left;width:50%;"><h3 style="color:orange">Chinese
Dumplings</h3></div></div></div></a><a onclick=return
'itemDescr("Gyoza","Panda Garden")'><div><div><div
style="float:left;width:50%;"><h3
style="color:orange">Gyoza</h3></div></div></div></a><a onclick=return
'itemDescr("Stinky Tofu","Panda Garden")'><div><div><div
style="float:left;width:50%;"><h3 style="color:orange">Stinky
Tofu</h3></div></div></div></a><a onclick=return 'itemDescr("Veggie
Burger","Panda Garden")'><div><div><div
style="float:left;width:50%;"><h3 style="color:orange">Veggie
Burger</h3></div></div></div></a></div>
当我单击其中一个标签时，出现以下错误：
未捕获到的SyntaxError：无效或意外的toke
itemDescr（“ Lamb Curry”，“ Andala
应该是：
itemDescr（“ Lamb Curry”，“ Andala's”）;
3 个解决方案
解决方案1
0 2019-07-06 20:53:25
您可以在字符串中的每个引号之前加一个反斜杠，如下所示：
restName = restName.replace(/'/g,"\\'");
for(i in result.MenuItems){
var itemName = result.MenuItems[i].name;
itemName = itemName.replace(/'/g,"\\'");
解决方案2
0 2019-07-06 23:02:32
您还可以使用concat()方法添加字符串：
let html = "<div>";
for(i in result.MenuItems) {
var itemName = result.MenuItems[i].name;
html = html.concat(
"<a onclick=return 'itemDescr(\"",
itemName,
'","',
restName,
"\")'>",
'<div>' +
'<div>' +
'<div style="float:left;width:50%;">' +
'<h3 style="color:orange">',
itemName,
'</h3>' +
'</div>' +
'</div>' +
'</div>' +
'</a>');
}
html+='</div>';
或者，您仍然可以使用+运算符。 您要记住的是，您无需在双引号内转义单引号，也无需在单qoutes内转义双引号。 例如：
var d = "'hi'"; // OK: d is 'hi'
var d = "\'hi\'"; // WRONG: unnecessary escape
解决方案3
0 2019-07-07 01:04:43
有几个原因使我们都避免按照您的开始方式进行操作。 可维护性和简洁性是我最大的烦恼。
我使用dataset API来隐藏信息，使用css代替内联样式，附加了适当的事件处理程序，并使处理程序从元素中检索信息，而不是将元素传递给处理程序的元素。
<!doctype html>
<html lang='en'>
<meta charset='utf-8'>
<script>
"use strict";
function byId(id){return document.getElementById(id)}
function newEl(tag){return document.createElement(tag)}
var menuItems = [
{ item: 'Pho', restaurant: 'Panda Garden' },
{ item: 'Chinese Dumplings', restaurant: 'Panda Garden' },
{ item: 'Gyoza', restaurant: 'Panda Garden' },
{ item: 'Stinky Tofu', restaurant: 'Panda Garden' },
{ item: 'Vege Burger', restaurant: 'Panda Garden' }
]
window.addEventListener('load', onLoaded, false);
function onLoaded(evt)
{
menuItems.forEach(
function(menuItem)
{
let result = newEl('a');
result.dataset.item = menuItem.item;
result.dataset.restaurant = menuItem.restaurant;
result.addEventListener('click', onClicked, false);
var div1=newEl('div'),div2=newEl('div'),div3=newEl('div');
let h3 = newEl('h3');
h3.textContent = menuItem.item;
div1.appendChild(div2);
div2.appendChild(div3);
div3.appendChild(h3);
result.appendChild(div1);
document.body.appendChild(result);
}
);
}
function onClicked(evt)
{
alert(`You chose ${this.dataset.item} from ${this.dataset.restaurant}`);
}
</script>
<style>
a > div > div > div
{
float: left;
width: 50%;
}
h3
{
color: orange;
}
</style>
</head>
<body>
</body>
</html>
用JavaScript输出转义字符
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.