Question

我在Ajax Datatable中生成动作按钮，路径来自symfony应用程序，并在我的javascript函数中显示Twig。

这是javascript函数：

{   data: "id", 
                render:    function ( data, type, full, meta ) {
                    var duplicate   = "{{ path('duplicate_of', { 'id': 'elementid' }) }}";
                    var deleteof    = "{{ path('delete_of'   , { 'id': 'elementid' }) }}";
                    var update      = "{{ path('updt_of'     , { 'id': 'elementid' }) }}";
                    var detail      = "{{ path('detail_of'   , { 'id': 'elementid' }) }}";
                    var exportof    = "{{ path('export_of'   , { 'id': 'elementid' }) }}";

                    console.log(detail);
                    console.log(data);

    return "<a class='pr5' title='Détail'        onClick='"+detail.replace("elementid", data)        +"'><i class='fa fa-search' aria-hidden='true'></i></a>"+
           "<a class='pr5' title='Dupliquer'     href='"+duplicate   .replace("elementid", data)     +"'><i class='fa fa-files-o' aria-hidden='true'></i></a>"+
           "<a class='pr5' title='Exporter'      href='"+exportof    .replace("elementid", data)     +"'><i class='fa fa-file-excel-o' aria-hidden='true'></i></a>"+
           "<a class='pr10' title='Modifier'     href='"+update      .replace("elementid", data)     +"'><i class='fa fa-pencil' aria-hidden='true'></i></a>"+
           "<a class='pr5 red' title='Supprimer' href='"+deleteof    .replace("elementid", data)     +"'><i class='fa fa-times' aria-hidden='true'></i></a>"
           ; 

                }
}

生成的javascript如下：

        {   data: "id", 
            render:    function ( data, type, full, meta ) {
                var duplicate   = "/backend/web/app_dev.php/fr/of/elementid/duplicate";
                var deleteof    = "/backend/web/app_dev.php/fr/of/elementid/delete";
                var update      = "/backend/web/app_dev.php/fr/of/elementid/update";
                var detail      = "/backend/web/app_dev.php/fr/of/elementid/detail";
                var exportof    = "/backend/web/app_dev.php/fr/of/elementid/export";

                console.log(detail);
                detail = "openModal('"+detail+"');";
                console.log(detail);

return "<a class='pr5' title='Détail'        onClick='"+detail.replace("elementid", data).replace(" ", "/")   +"'><i class='fa fa-search' aria-hidden='true'></i></a>"+
       "<a class='pr5' title='Dupliquer'     href='"+duplicate   .replace("elementid", data)     +"'><i class='fa fa-files-o' aria-hidden='true'></i></a>"+
       "<a class='pr5' title='Exporter'      href='"+exportof    .replace("elementid", data)     +"'><i class='fa fa-file-excel-o' aria-hidden='true'></i></a>"+
       "<a class='pr10' title='Modifier'     href='"+update      .replace("elementid", data)     +"'><i class='fa fa-pencil' aria-hidden='true'></i></a>"+
       "<a class='pr5 red' title='Supprimer' href='"+deleteof    .replace("elementid", data)     +"'><i class='fa fa-times' aria-hidden='true'></i></a>"
       ; 

            }
        }

当我在Stackoverflow中复制/粘贴时，生成的HTML代码如下所示：

<td>
    <a class="pr5" title="Détail" onclick="openModal(" backend="" web="" app_dev.php="" fr="" of="" 39="" detail');'="">
        <i class="fa fa-search" aria-hidden="true"></i>
    </a>
    <a class="pr5" title="Dupliquer" href="/backend/web/app_dev.php/fr/of/39/duplicate">
        <i class="fa fa-files-o" aria-hidden="true"></i>
    </a>
    <a class="pr5" title="Exporter" href="/backend/web/app_dev.php/fr/of/39/export">
        <i class="fa fa-file-excel-o" aria-hidden="true"></i>
    </a>
    <a class="pr10" title="Modifier" href="/backend/web/app_dev.php/fr/of/39/update">
        <i class="fa fa-pencil" aria-hidden="true"></i>
    </a>
    <a class="pr5 red" title="Supprimer" href="/backend/web/app_dev.php/fr/of/39/delete">
        <i class="fa fa-times" aria-hidden="true"></i>
    </a>
</td>

当我在控制台中看到它时看起来像这样：

控制台在页面加载后显示：

/backend/web/app_dev.php/fr/of/elementid/detail
openModal('/backend/web/app_dev.php/fr/of/elementid/detail');

实际问题：

第二行看起来对我openModal('/backend/web/app_dev.php/fr/of/elementid/detail');，在此之后，我只需要将elementid替换为data中包含的实际ID。那部分：detail.replace("elementid", data)，但这一步看起来是错误的。

我不明白我做错了什么......有人有想法吗？

Answer 1

<强> TL; DR：

将.replace("'", "'")添加到detail.replace("elementid", data)（或detail.replace("elementid", data).replace(" ", "/")）的末尾。

<强>解释

因为detail是openModal('/backend/web/app_dev.php/fr/of/39/detail');（正如您在控制台中看到的那样），返回语句的第一行，即：

return "<a class='pr5' title='Détail'        onClick='"+detail.replace("elementid", data).replace(" ", "/")   +"'><i class='fa fa-search' aria-hidden='true'></i></a>"+

产生这个：

<a class='pr5' title='Détail'        onClick='openModal('/backend/web/app_dev.php/fr/of/39/detail');'><i class='fa fa-search' aria-hidden='true'></i></a>

更具体地说，我们对onClick属性感兴趣：

onClick='openModal('/backend/web/app_dev.php/fr/of/39/detail');'

您看到值中有两个'个字符？这就是弄乱属性的原因。将其替换为'，这是'字符的HTML实体（请参阅How do I escape a single quote?）。所以当你有这个时（注意我添加了.replace("'", "'")）：

return "<a class='pr5' title='Détail'        onClick='"+detail.replace("elementid", data).replace(" ", "/").replace("'", "&#39;")   +"'><i class='fa fa-search' aria-hidden='true'></i></a>"+

生成的HTML是：

<a class='pr5' title='Détail'        onClick='openModal(&#39;/backend/web/app_dev.php/fr/of/39/detail&#39;);'><i class='fa fa-search' aria-hidden='true'></i></a>

Javascript字符串解析在没有任何理由的情况下用空格更改斜杠

1 个答案: