JQuery UI encoding nightmare

问题

I want to be able to pass any string to the buttons text in JQuery UI.

Suppose I have this string:

Ajouter L'amie a la liste "amies"

The only way to actually pass this text without causing a massive JavaScript error is by HTML-encoding it.

registerhtml.dialog({
        modal: true,
        title: 'My Dialog Title',
        resizable: false,
        buttons: [
            {
                text: 'Ajouter L&#39;amie a la liste &quot;amies&quot;',
                click: function(){
                    // Do something important
                    $(this).dialog('close');
                }
            },
            {
                text: 'Cancel',
                click: function() {
                    $(this).dialog('close');
                }
            }
        ]
    });

But I'm no getting any Human-Readable text in the button. Only the same encoded text.

Is there a quick way to solve this issue? Maybe there's an option that I'm missing in the button object.

Or should I put my gloves, call a nurse and start surgery in the JQuery-ui.js file?

回答1:

To be able to use htmlentities, you'll have to use the html method when inserting the strings into the buttons, as text will literally insert the text without doing encoding of entities :

registerhtml.dialog({
    modal: true,
    title: 'My Dialog Title',
    resizable: false,
    buttons: [
        {
            html: 'Ajouter L&#39;amie a la liste &quot;amies&quot;',
            click: function(){
                // Do something important
                $(this).dialog('close');
            }
        },
        {
            html: 'Cancel',
            click: function() {
                $(this).dialog('close');
            }
        }
    ]
});

FIDDLE

回答2:

Depending if you use ' or " for your string, escape all accournces of ' ör " in the string with a \

Example:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Demo</title>
        <script src="jquery-1.8.2.min.js"></script>
        <script src="jquery-ui-1.9.0.custom.min.js"></script>
        <link href="jQueryUI_css/ui-lightness/jquery-ui-1.8.24.custom.css" rel="stylesheet" />
        <script>
            $(function(){

                //using ' to define a string
                var text = 'Ajouter L\'amie a la liste "amies"'
                $('div').text(text).button();

                //using " to define a string
                var text2 = "Ajouter L'amie a la liste \"amies\"";
                $('button').text(text).button();
            });
        </script>
    </head>
    <body>
    <div></div>
    <button></button>
    </body>
</html>

来源：https://stackoverflow.com/questions/13718836/jquery-ui-encoding-nightmare

标签

jquery

jquery-ui

html-encode

html-escape-characters