jQuery escape white spaces

Question

Inside the selectmenu from https://github.com/fnagel/jquery-ui I have set a title for each option do be displayed as an icon. Working fine except the icons which filename contains white space. No icon is shown if the file name is like African Union.png

the jquery:

        $('select.flags').selectmenu({
            icons: [
                {find: '.icon'}
            ],
            bgImage: function() {
                return 'url(' + $(this).attr("title") + ')';
            }
        });

html:

<option value="African Union.png" class="icon" title="/img/icons/flags/African Union.png" >African Union</option>

If I am not able to get it working inside the jQuery - How to escape the white spaces using php? Is the str_replace the only option?

score 1 · Answer 1 · answered Mar 10 '12 at 09:55

Use urlencode. You can't have spaces in a URL in the first place.

$filename = "African Union.png";
$url = urlencode($filename);
$html_safe_url = htmlspecialchars($url);

echo "<option value='$html_safe_url' class='icon' title='/img/icons/flags/$html_safe_url'>African Union</option>

score 1 · Accepted Answer · edited May 23 '17 at 12:21

URLs in CSS can either be unquoted or quoted in single or double quotes. If unquoted, as in your case, you need to escape certain characters:

Some characters appearing in an unquoted URI, such as parentheses, white space characters, single quotes (') and double quotes ("), must be escaped with a backslash so that the resulting URI value is a URI token: '\(', '\)'.

So:

'url(' + $(this).attr("title").replace(/(?=[()\s'"])/g, '\\') + ')'

Or you put the URL in quotes, preferably double quotes as plain single quotes are allowed in URLs:

'url("' + $(this).attr("title") + '")'

score 0 · Answer 3 · answered Mar 10 '12 at 09:55

Try this one

$("#text_box_id").change(function() {
var name = $(this).val();
var dname_without_space = $("#text_box_id").val().replace(/ /g, "");
var name_without_special_char =      dname_without_space.replace(/[^a-zA-Z 0-9]+/g, "");
$(this).attr("value", name_without_special_char );
});

It will remove white space as well as special characters. see this post

http://patelmilap.wordpress.com/2011/08/17/using-jquery-remove-space-special-characters-while-typing/

jQuery escape white spaces

3 Answers3