Nested quotes in javascript and html

I have a big problem with quotes in java script and html dom. I want to use just double quotes("), not ' at all! Here is my code:

<a onclick="aClicked("<span onclick="spanClicked("You clicked me")">I'm an Span</span>")">Add span</a>

<script type="text/javascript">
function aClicked(str) {
    $(document).append(str);
}
function spanClicked(str) {
    alert(str);
}
</script>

Can anyone help throw kind of these problems!? Tanks.

here is my original code (it work correctly but I just want to simplfy it and underestand it): "I call this function with ajax"

<?php
function getTags() {
        $values = ['test1', 'test2'];
        $valuesString = '';
        $baseSpanString = '<span><span class="tag">?</span><a onclick="Tags.Update($(this).parent().parent(), $(this).parent(), &quot;tag&quot;);">x</a></span>';
        foreach ($values as $tmpValue) {
            if(trim($tmpValue) == '') {
                continue;
            }
            $valuesString .= str_replace('?', $tmpValue, $baseSpanString);
        }

        $xhtml = '
                <div>
                    <input type="text" onkeydown="return Tags.Insert($(this).parent(), $(this), event, \''.str_replace('"', '\\\'', $baseSpanString).'\', \'tag\');"/>
                    <textarea style="display:none;">'.implode('-', $values).'</textarea>
                    '.$valuesString.'
                </div>
        ';

        return $xhtml;  
}
?>  

<script type="text/javascript">

Tags = {};
Tags.Update = function(div, span, tagClass) {
    div = $(div);
    if(!div.length) {
        alert('Error');
        return false;
    }
    $(span).remove();
    var tagsSpan = $('.'+tagClass, div);
    var tagsString = [];
    if(tagsSpan.length) {
        $.each(tagsSpan, function(index, val) {
            tagsString.push($(val).text());
        });
    }
    $('textarea', div).text(tagsString.join('-'));
};
Tags.Insert = function(div, input, event, baseSpanString, tagClass) {
    if (event.keyCode == 13)
    {
        div = $(div);
        input = $(input);
        if(!div.length || !input.length) {
            alert('Error');
            return false;
        }
        var val = input.val();
        if(val && val != '') {
            input.val('');
            var spanString = baseSpanString.replace('?', val);
            div.append(spanString);
        }
        var tagsSpan = $('.'+tagClass, div);
        var tagsString = [];
        if(tagsSpan.length) {
            $.each(tagsSpan, function(index, val) {
                tagsString.push($(val).text());
            });
        }
        $('textarea', div).text(tagsString.join('-'));
        return false;
    }
};

</script>  

Answers 1

  • Two answers:

    • Your string question
    • The right way instead

    Your string question

    ' is the feature specifically designed for this. But sometimes this stuff does legitimately come up...

    The key is to be aware of what kind of text you're dealing with at each stage:

    • Within the " of the attribute (onclick="..."), you're writing HTML text, even though what you're writing in that HTML text is JavaScript. So you can use &quot; for quotes if you insist on not using '.

    • If you need to use a string within your JavaScript code (such as the onclick in the string we're passing aClicked) and insist on not using ', put a \ before the &quot;.

    • If you need to use a quote within an HTML string within an HTML string (such as the string being passed to spanClicked, which is an HTML string inside a JavaScript string inside an HTML string), then you need something that will end up being &quot; after the entities in the first HTML string are processed. So that's &amp;quot;

    So:

    <a onclick="aClicked(&quot;<span onclick=\&quot;spanClicked(&amp;quot;You clicked me&amp;quot;)\&quot;>I'm an Span</span>&quot;)">Add span</a>
    

    Example:

    function aClicked(str) {
        $(document.body).append(str);
    }
    function spanClicked(str) {
        alert(str);
    }
    <a onclick="aClicked(&quot;<span onclick=\&quot;spanClicked(&amp;quot;You clicked me&amp;quot;)\&quot;>I'm an Span</span>&quot;)">Add span</a>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    The right way instead

    But again, this is all just a way to make your code complicated unmaintainable; instead, just use jQuery, as you're already using jQuery:

    Example:

    $("a").on("click", function() {
        var span = $("<span>I'm a span</span>");
        span.on("click", function() {
          spanClicked("You clicked me");
        });
        $(document.body).append(span);
    });
    function spanClicked(str) {
        alert(str);
    }
    <a>Add span</a>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


Related Articles