Replacing dynamic content jQuery/javascript

Question

I need to do a dynamic replace in a string with jQuery. I have read about using wildcards in selectors, but I want it in a string.

Considering this HTML:

<style type="text/css">@import url('css/another.css');</style>
<style type="text/css">@import url('css/stylesMQ.css');</style>

And I have this function in jQuery:

function adjustStyle(width) {
    width = parseInt(width);
    if (width < 701) {
        $('style:contains("MQ")').text(function () {
        return $(this).text().replace("MQ.css", "400MQ.css");
        });
    } else if ((width >= 701) && (width < 900)) {
        $('style:contains("MQ")').text(function () {
        return $(this).text().replace("MQ.css", "800MQ.css");
        });         
    } else {
       $('style:contains("MQ")').text(function () {
        return $(this).text().replace("MQ.css", "MQ.css");
        });         
    }
}

This function is part of an entire jQuery that changes an @imported css depending of screen size.

ERROR

It works, but when I start playing with the screen size I get something like:

@import url('css/styles800800800800400400400400400400400400400400MQ.css');

I can't figure how can I tell jQuery to replace also the number.
I suppose that I need something like:

.replace("styles*MQ.css", "styles400MQ.css");

TIPS:

I'm not using mediaqueries because my client is Fred Flinstone, he uses IE7 and don't wants pollyfills because the extra loading time and because thinks they're the demon.
There are other @imported CSS's in the page
I don't know the entire path for the CSS nor the folder, only the name (that's the reason I want to make replacing instead of write the relative path location of the new CSS.)
I can change the name of any of these CSS.

this is related to javascript, not specific to jquery, you should edit your tag — A. Wolff
– A. Wolff, Commented Jun 14, 2013 at 8:42

Arun P Johny · Accepted Answer · 2013-06-14 09:19:15Z

4

Instead of .replace("MQ.css", "MQ.css"); try something like

.replace(/\d*MQ\.css/, "MQ.css");
.replace(/\d*MQ\.css/, "400MQ.css");

edited Jun 14, 2013 at 9:19

answered Jun 14, 2013 at 8:43

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Arun P Johny Over a year ago

@Arkana there was an issue, fixed

Arun P Johny Over a year ago

@downvoter another one!! :) . looks like someone is crazy... still would you mind explaining why

Arkana Over a year ago

The DV is mine! Sorry! Because I had thought the code didn't work, but it was my mistake. I tried to remove the DV, but I recklessly press the button twice and now is blocked. :( Please, could you edit the answer (altough dummy edit) to unblock my stupid-foolish vote, please?

Arkana Over a year ago

How is called what you used, please, all that slashes and asterisk stuff? (I'm a totally n00b). I would like to understand better how it works but do not know what to google up. Thank you.

Arun P Johny Over a year ago

It is using regular expression. You can search for RegExp in net

Ashish · Accepted Answer · 2013-06-14 08:44:58Z

0

$('style:contains("MQ")').text(function () {
    return $(this).text().split('/')[0]+"/400MQ.css";
});

answered Jun 14, 2013 at 8:44

Ashish

486 bronze badges

2 Comments

Ashish Over a year ago

Another, more semantic option would be to add a class to the body of the page (.mq400) , and prefix the relevant styles in a single css file with that class (.mq400 p {/* etc */ }) The advantage is that this way only a single css file needs to be loaded and the change would be instant (as opposed to loading a new css file after the page has loaded and the js has executed).

Arkana Over a year ago

This works in this concrete case, but in a large path (like @import url('folder/css/MQ.css')) it deletes me almost the entire path...

Edorka · Accepted Answer · 2013-06-14 08:51:46Z

0

I would use

$('style:contains("MQ")').text(function (pos, value) {
        return value.replace(/styles(400|)MQ\.css/, "styles800MQ.css");
});

same solution changing the expected expression (400, 800, '')

edited Jun 14, 2013 at 8:51

answered Jun 14, 2013 at 8:46

Edorka

1,81113 silver badges25 bronze badges

Collectives™ on Stack Overflow

Replacing dynamic content jQuery/javascript

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related