Rich-text Reply

Using RegEx to modify DIVs?

asmang 01-21-15

Using RegEx to modify DIVs?

[ Edited ]

Hi,

 

I've got some dynamically generated DIVs that, for some reason, insert a GUID as part of the CSS.  I'd like to use a regex to find all the DIVs that match the general pattern (same start and end for each one) and then take an action on them all in one shot.  For example, hide them all.

 

I found this article:

http://james.padolsey.com/javascript/regex-selector-for-jquery/

 

I tried to use the code but it kept failing.  I placed the JS in the Experiment JS file and also tried it in the variation code with no success.

 

The example string I'm trying to match is:

container_42C85A39-4143-72CC-EF1A-DA2B7CCAC235-jumbotron-card-1.media

 

Where each one begins with "container_" and ends with ".media".  

 

The regex I tried was:

$('div:regex(id,^container_.*.media').hide();

 

The error I get is:

Error evaluating variation javascript:
Syntax error, unrecognized expression: ^container_.*

 

Any help would be appreciated!

 

Thanks,

Greg

Level 2

Joel_Balmer 01-21-15
 

Re: Using RegEx to modify DIVs?

Hi Greg, interesting targeting case you have here!

 

Are you able to provide the URL of the website you're trying to test this on? Somebody else might have some other ideas and suggestions to help you Smiley Happy

 

I had a little look at the regex, and it didn't match your test id / string for me, but wrapping it in brackets did:

 

^(container_.*.media)$

 And in fact if you esacpe the final . using \ it matches the .media too:

 

^(container_.*\.media)$

 Hopefully that helps, let us know how you get on!

JDahlinANF 01-21-15
 

Re: Using RegEx to modify DIVs?

You don't need to add any custom functions.

 

This code finds all of the divs where the class starts with "container" and also contain "media"

$('div[class^="container"]').filter('[class*="media"]')

 

Try it on a page that contains these divs (and jQuery)

<div class="container_1_media">
container 1 media
</div>
<div class="container_1_somethingelse">
container 1 somethingelse
</div>
<div class="container_3_media">
container 2 media
</div>
<div class="container_2_media">
container 3 media
</div>

 

asmang 01-21-15
 

Re: Using RegEx to modify DIVs?

Thanks guys.  Unfortunately, neither of those worked for me.

Level 2
asmang 01-21-15
 

Re: Using RegEx to modify DIVs?

This is what I tried:
$('div[class^="container"]').filter('[class*="media"]').hide();

I get an error with a red line under the "hide();"
TypeError: undefined is not a function (line 8, col 57)
Level 2
JDahlinANF 01-21-15
 

Re: Using RegEx to modify DIVs?

Here is my test page - it works fine for me:

 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>

<body>
<div class="container_123-jumbotron-card-1.media">container_123-jumbotron-card-1.media</div>
<div class="container_456-jumbotron-card-1">container_456-jumbotron-card-1</div>
<div class="container_798-jumbotron-card-1.media">container_798-jumbotron-card-1.media</div>
<div class="container_654-jumbotron-card-1.media">container_654-jumbotron-card-1.media</div>

<script type="text/javascript">
$('div[class^="container"]').filter('[class*="media"]').hide();
</script>
</body>
</html>   

 Please post a sample page that shows it not working and we can re-evaluate the approach based on the actual DOM structure.

Gary 01-21-15
 

Re: Using RegEx to modify DIVs?

Hi Greg,

 

Looking at the example string you're trying to match, is this an element with two classes to it or possibly an ID and a class?

 

I ask as your sample string has a period in it before the word media (.) which is symbolic for a class. In this case, could it be an element with an ID that has 'container_42C85A39-4143-72CC-EF1A-DA2B7CCAC235-jumbotron-card-1' and also a shared class of 'media' ?

 

If so, that could be why Napoleon's code may not be working. For instance, here's that code with the ID of container:

 

$('div[id^="container"]').filter('[class*="media"]')

 

 

- Gary
Optimizely - Turning the World's data into action
Optimizely

Re: Using RegEx to modify DIVs?

[ Edited ]

Greg,

 

I realize this reply is a bit late, bit I figured I'd throw something out there anyway. You can easily match this string using a standard regex. The following regex will match a string that starts with container and ends with .media

 

    var regex = /^(container_)(.*)(\.media)$/;

 

You can test this out on various strings in your browser console. For example: http://screencast.com/t/xdsBkmlX

 

In your case, if you were trying to match a class name or attribute name or data value or whatever, then you could iterate over your <div> elements with jQuery .each() loop, pull out the class/attribute/data name and convert it to a string, and then run the regex .test() method on it to see if there's a match or not and handle accordingly. No need for jQuery regex!

 

Of final note is that Optimizely uses a slimmed-down version of jQuery, so the .hide() and .show() methods are NOT available, as well as a slew of other methods. Your best bet here if you want to use jQuery is to use the .css() method, like:

 

    $('.some_divs').css('display', 'none');

Or you could of course use vanilla JavaScript&colon;

 

    $('.some_divs').each(function() {
        this.style.display = "none"; // using `this` and NOT $(this)
    });

 

Notice in the above example that I used the this keyword to get a reference to the element node to run the vanilla JS on. I did NOT use the jQuery object $(this) since this would fail. So ultimately, you might have something like: 

    $('.divs_in_question').each(function() {
        var string_to_check = $(this).data('some-value');

        var regex = /^(container_)(.*)(\.media)$/;

        if ( regex.test(string_to_check) ) {  // match found!
            this.style.display = "none";  // hide the <div> in question!
        }

    });

Hopefully this helps....

 

        

-- Sean
UI Developer @ Blue Acorn

optimizely developer certification