.replace() does not work in IE7

Question

The replace() global is not working in IE7, but works within IE8. Its a bunch of products which I am toggling on and off.

If I remove the .replace() it works in IE7.

Script

$('li.prod').toggle(true);

$('li.prod:visible').each(function(i){

    i && ((i+1)%4 || $(this).addClass('prod-end'));

});

$('li.button').click(function (){

    $('li.button').removeClass('active');

    $(this).addClass('active');

$('li.prod').removeClass('prod-end');

if ( $('li#all').hasClass('active')) {

    $('li.prod').toggle(true);

    $('li.prod:visible').each(function(i){

            i && ((i+1)%4 || $(this).addClass('prod-end'));

        });

} else {

    $('li.prod').toggle(false);

    $('li.' + $(this).text().replace(/ /g, "-")).toggle(true);

        $('li.' + ($(this).text().replace(/ /g, "-")) + ':visible').each(function(i){

            i && ((i+1)%4 || $(this).addClass('prod-end'));

        });

}

});

HTML

<div class="subNav">
<ul>
<li class="button active" id="all">all</li>
<li class="button" id="swimming">swimming</li>
<li class="button" id="lawn">lawn games</li>
</ul>
</div>
<ul>
<li class="prod swimming"></li>
<li class="prod swimming"></li>
<li class="prod lawn-games"></li>
<li class="prod lawn-games"></li>
<li class="prod lawn-games"></li>
</ul>

`"One Two Three".replace(/ /g, '-')` produces `One-Two-Three` in IE7 for me. Need more info. — Robert, Jul 06 '11 at 19:45

score 0 · Answer 1 · answered Jul 06 '11 at 20:17

0

Mmm, that's strange. Could you try:

$('li.' + $(this).text().replace(/\s/g, "-")).toggle(true);

If this doesn't work, the issue isn't related with .replace(), but with your this element.

Hope this helps. Cheers

answered Jul 06 '11 at 20:17

Edgar Villegas Alvarado

18,204
2
42
61

I tried the replace you suggested and no luck. Its works if I remove .replace(). – Buildingbrick Jul 06 '11 at 23:03

score 0 · Answer 2 · answered Jul 06 '11 at 23:34

This is my test page I just tried in IE8. It works fine. It also works fine on FF5.

Could you please copy this and test?

You can directly copy and paste the whole thing.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        $(function () {
            $('li.prod').toggle(true);

            $('li.prod:visible').each(function (i) {
                i && ((i + 1) % 4 || $(this).addClass('prod-end'));
            });

            $('li.button').click(function () {
                $('li.button').removeClass('active');
                $(this).addClass('active');
                $('li.prod').removeClass('prod-end');

                if ($('li#all').hasClass('active')) {
                    $('li.prod').toggle(true);
                    $('li.prod:visible').each(function (i) {
                        i && ((i + 1) % 4 || $(this).addClass('prod-end'));
                    });
                }
                else {
                    $('li.prod').toggle(false);
                    $('li.' + $(this).text().replace(/ /g, "-")).toggle(true);
                    $('li.' + ($(this).text().replace(/ /g, "-")) + ':visible').each(function (i) {
                        i && ((i + 1) % 4 || $(this).addClass('prod-end'));
                    });
                }
            });
        });
    </script>
</head>
<body>
    <div class="subNav">
        <ul>
            <li class="button active" id="all">all</li>
            <li class="button" id="swimming">swimming</li>
            <li class="button" id="inflatables">inflatables</li>
        </ul>
    </div>
    <ul>
        <li class="prod swimming">swim1</li>
        <li class="prod swimming">swim2</li>
        <li class="prod inflatables">inf1</li>
        <li class="prod inflatables">inf2</li>
        <li class="prod inflatables">inf3</li>
    </ul>
</body>
</html>

When I said it works, I meant: clicking all shows all. Clicking swimming shows swim1, swim2 but hides inf* and clicking inflatables shows inf1, inf2 and inf3 but hides swim1, swim2 — kheya, Jul 06 '11 at 23:39
Yes it works, but try it with a space in one of the links. change "inflatables" to "lawn games" in the subnav. and Change the class inflatables to "lawn-games". I updated my example to reflect this as well since this is the whole reason why the .replace is being used. — Buildingbrick, Jul 07 '11 at 14:40
http://stackoverflow.com/questions/360491/how-do-i-strip-white-space-when-grabbing-text-with-jquery this referenced this to remove white space in IE "/[\s\xA0]+/g" — Buildingbrick, Jul 07 '11 at 15:17

score 0 · Accepted Answer · answered Jul 07 '11 at 17:31

0

Hey found a better way to solve this. I just used the first letter of the text rather than trying to replace the white spaces. Simpler solution.

Thanks for the help.

answered Jul 07 '11 at 17:31

Buildingbrick

107
3
14

.replace() does not work in IE7

3 Answers3