JavaScript экранирование "," символы - PullRequest
Новая
       12

JavaScript экранирование "," символы

0 голосов
/ 06 июля 2019

Я столкнулся с проблемами с escape-символом внутри щелчка тега

Я попытался заключить строку в двойные и одинарные кавычки.Но я все еще сталкиваюсь с проблемой 

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 + = "" + "скажем, если имя eiter или rest name имеют", то код прерывается во время фактического вызова этой функции

Окончательный 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>

Когда я нажимаю на один из тегов a, я получаю сообщение об ошибке ниже:

Uncaught SyntaxError: Invalid orнеожиданный токен

itemDescr («Карри из ягненка», «Andala

» Это должно было быть:

itemDescr («Карри из ягненка», «Andala's»);

Ответы [ 3 ]

0 голосов
/ 07 июля 2019

Вы также можете использовать метод 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>';

Или вы все равно можете использовать оператор +.Следует помнить, что вам не нужно избегать одинарных кавычек внутри двойных кавычек или двойных кавычек внутри одинарных кавычек.Например: 

var d = "'hi'"; // OK: d is 'hi'
var d = "\'hi\'"; // WRONG: unnecessary escape
0 голосов
/ 07 июля 2019

Есть несколько причин, по которым мы бы все не делали так, как вы начали. Техобслуживание и лаконичность - мои самые большие ошибки.

Я спрятал информацию, используя 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>
0 голосов
/ 06 июля 2019

Вы можете поставить обратную косую черту перед каждой цитатой в строках следующим образом: 

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