• January 19, 2012

    Non-breaking white space Internet Explorer 8 JavaScript regexp bug (and how to fix it)

    While developing jQuery plugin for upcoming bookmarking "Items in select boxes" plugin for our Vudu CMS

    I wrote a simple regexp to strip few characters (pipe, minus, apostrof and white-space) that are added before the actual item.

     function cleanOptionText(txt)
     return txt.replace(/^[\s|'-]+/, '');

    It worked just fine on FF9 and Chrome but in IE8 only the first pipe (|) was removed. After some debugging I discovered that I have both spaces and non-breaking spaces that should be removed and that in IE8 class shorthand \s (which should include all white space) doesn’t include non-breaking space.

    Code for non-breaking space is 0xa0 (dec 160) so regexp should be updated as follows:

    function cleanOptionText(txt)
    return txt.replace(/^[\s\xA0|'-]+/, '');

    Also we took opportunity to update our javascript trim functions:

    String.prototype.trim = function()
    return this.replace(/^[\s\xA0]+|[\s\xA0]+$/g,"");
    String.prototype.ltrim = function()
    return this.replace(/^[\s\xA0]+/g,"");
    String.prototype.rtrim = function()
    return this.replace(/[\s\xA0]+$/g,"");

    Here is complete html test file:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <title>nbsp test</title>
        <form action="#">
          <select id="testselect">
            <option value="1">&nbsp; &nbsp; Some option</option>
        <script type="text/javascript">
          var txt=document.getElementById('testselect').options[0].text;
          var analyizeTxt='';
          var l=txt.length;
          for(var i=0; i<l; i++)
            analyizeTxt+= '[ ('+txt.charCodeAt(i)+')=('+txt.charAt(i)+')]';
          var newTxt1 = txt.replace(/^\s+/, '');
          alert('Using only \\s = ('+newTxt1+')');
          var newTxt2 = txt.replace(/^[\s\xA0]+/, '');
          alert('Using \\s and \\xA0= ('+newTxt2+')');

Reader comments:


    March 12, 2014 @ 17:32

    Alexander says:

    Thank You!

Have your say:

This blog is Gravatar friendly. Don't have Gravatar? Get one fast!

Proudly running on Word Press, and above all, proudly using Comic Sans.

Nivas.hr © Copyright 2009    All right reserved    Made in Croatia Yeah, we made our own site!Nivas.hr