Javascript string parsing change slash with space with no reason

Question

I'm generating action buttons in my Ajax Datatable with routes coming from a symfony app, and displayed with Twig in my javascript function.

Here is the javascript function :

{   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>"
           ; 

                }
}

The javascript generated is as followed :

        {   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>"
       ; 

            }
        }

The HTML code generated looks like this when I copy/paste in Stackoverflow :

<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>

And looks like this when I see it in console :

The console Is displaying this after the page loading :

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

The actual problem :

The second line looks right to me openModal('/backend/web/app_dev.php/fr/of/elementid/detail'); , after that, I just need to replace elementid by the actual id contained in data . Thats the part : detail.replace("elementid", data) but this step looks to be wrong.

I don't understand what I'm doing wrong ... Does anybody have an idea ?

Matias Kinnunen · Accepted Answer · 2018-01-18T12:17:12.537

TL;DR:

Add .replace("'", "'") to the end of detail.replace("elementid", data) (or detail.replace("elementid", data).replace(" ", "/")).

Explanation:

Because detail is openModal('/backend/web/app_dev.php/fr/of/39/detail'); (as you can see in the console), the first line of the return statement, i.e. this:

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

produces this:

<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>

More specifically, we are interested in the onClick attribute:

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

You see that you have two ' characters in the value? That's what's messing the attribute up. Replace them with ', which is the HTML entity of the ' character (see How do I escape a single quote?). So when you have this (notice that I added .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>"+

The resulting HTML is this:

<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>

Worked like a charm. Thanks man. Thanks for the explanation too, I won't do the same mistake anymore — Gauthier, Jan 23 '18 at 14:39

Javascript string parsing change slash with space with no reason

1 Answers1