Question

我在标签的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”）;

Answer 1

您可以在字符串中的每个引号之前添加反斜杠，如下所示：

restName = restName.replace(/'/g,"\\'");
for(i in result.MenuItems){
   var itemName = result.MenuItems[i].name;
   itemName = itemName.replace(/'/g,"\\'");

Answer 2

您还可以使用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

Answer 3

出于某些原因，我们都会避免按照开始时的方式进行操作。可维护性和简洁性是我最大的烦恼。

我使用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逸出'，“字元

3 个答案: