searching for a string in javascript

Question

I am working on javascript tool for a client site at the moment, basically the users selects a colour from a drop down list, and the client then wants that image for that colour to be displayed.

There are a view problems however, the system the client uses has no way of adding id's or classes to the image, so I cant just do a simple,

if (select value = a class)
{
    showImage
}

What I have had to do so far, is add the images colour to the image's alt text, so a image title might typically looks like this:

A sock, Green

So far I have the following code:

$('.information select#colours').change(function(){
    var colour = $(this).val();
});

On my page there can be any number of product images, and their markup will look like this,

<div class="carousel js" tabindex="0">
<ul class="alternative_images" style="position: absolute; top: 0px; width: 60px; height: 276px;">
    <li>
        <a href="/uploaded/thumbnails/db_file_img_4_254x347.jpg">
            <img alt="Ben Fogle Sock, Grey" src="/uploaded/thumbnails/db_file_img_9_58x79.jpg">
        </a>
    </li>
    <li>
        <a href="/uploaded/thumbnails/db_file_img_4_254x347.jpg">
            <img alt="Ben Fogle Sock, Green" src="/uploaded/thumbnails/db_file_img_7_58x79.jpg">
        </a>
    </li>
    <li>
        <a href="/uploaded/thumbnails/db_file_img_4_254x347.jpg">
            <img alt="Ben Fogle Sock, Red" src="/uploaded/thumbnails/db_file_img_5_58x79.jpg">
        </a>
    </li>
</ul>

My question is

1) How can I collate all the colours of the images that are found in the images alt after a comma? 2) How can I then search through those colours to pull back the correct image?

Is there a better way of doing this?

Could you add classes or ids to any of the images' parent (a, li etc)? Or is the alt text absolutely the only thing you can change? — Henry
– Henry, Commented Mar 15, 2012 at 12:15
add the moment, the believe the the only thing I can change is the alt text, but the image description has to remain which means the format of the alt needs to be descrption, colour (I assume I can then spilt that string on the comma?) — Udders
– Udders, Commented Mar 15, 2012 at 12:20
One consideration: Will every image have a color? And are commas other than the one separating the description from the color allowed in the alt text? For example, "Dress Sock, Argyle"—how do we know "Argyle" isn't a color but part of the description? If that situation might arise then a delimiter other than comma may be desirable. — Jordan Running
– Jordan Running, Commented Mar 15, 2012 at 12:59

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

for search any string in javascript i think you can use this function

in

searching string in array and object , in your case define array from string what do you want to search example like this

var colors = new Array("red", "black", "grey", "blue", "yellow");

to search red color "red" in colors; that will be return true.false if seach is not found.

// you also can use object to.

var colors = {color1: "red", color2: "grey", color3: "black"};

for using

color1 in colors;//return true
match refer this https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/match
RegExp refer this https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/RegExp
in refer this https://developer.mozilla.org/en/JavaScript/Reference/Operators/in

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 15, 2012 at 12:37

viyancs

2,3494 gold badges40 silver badges72 bronze badges

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

Comments

Jordan Running · Accepted Answer · 2012-03-15 13:04:31Z

Several people have added working answers, but I'm thinking if you have enough images to filter by color you may be interested in performance, too, which means that selecting all of the image elements and parsing their alt text every time the filter option is changed isn't the best solution.

An alternative is to do this once, extracting the colors only on pageload and adding them as a CSS class on the images. Since modern browsers optimize class lookups with querySelectorAll (and jQuery uses this optimization whenever possible) you can then do a plain old class select and expect good performance:

$(function() {
  var thisEl, thisAlt, lastCommaAt, thisColor;

  // select all of the images that have an `alt` attribute containing a comma
  $( '.alternative_images img[alt *= ","]' ).each( function() {
    thisEl  = $(this);
    thisAlt = thisEl.attr( 'alt' );

    // get the position of the last comma
    lastCommaAt = thisAlt.lastIndexOf( ',' );
    if( lastCommaAt > 0 ) {
      // get the part after the last comma and trim extra whitespace
      thisColor = $.trim( thisAlt.slice( lastCommaAt + 1 ) );

      // add the color as a CSS class
      thisEl.addClass( thisColor );
    }
  } );


  // later...

  $( '.information select#colours' ).change( function() {
    var selector     = '.alternative_images .' + $(this).val();
      , matchingImgs = $( selector )
    ;

    // do something with the matching images
    console.log( matchingImgs );
  });
});

(If performance is still an issue another option is to build a hash table (using a JavaScript object) e.g. var els = { "Red" : [ <img src...>, <img...>, ... ], "Blue" : [ <img...>, ...] } for very fast lookups e.g. els[ "Blue" ].)

Dogbert · Accepted Answer · 2012-03-15 12:21:02Z

0

var color = "Red";

var els = $("img").filter(function() {
  return $(this).attr('alt').indexOf(", " + color) !== -1;
});

els will now contain all images with alt including , Red.

answered Mar 15, 2012 at 12:21

Dogbert

224k43 gold badges419 silver badges416 bronze badges

1 Comment

natedavisolds Over a year ago

I always forget about functions being passed into .filter. Thanks for the reminder.

natedavisolds · Accepted Answer · 2012-03-15 12:48:15Z

0

You could use the '*=' attribute selector. Here is an example:

function findAlternativeImageWithColor(color) {
  return $(".alternative_images img[alt*=', " + color + "']");
};

$images = findAlternativeImageWithColor("Green");


$images.each(function() {
    console.info(this);
})

UPDATE - if you find yourself doing this a lot you could add a custom selector expression (hat tip: Dogbert for the indexOf expression):

$.extend($.expr[':'], {
    color: function(el, i, m) {
        var color = m[3];
        return $(el).attr('alt').indexOf(", " + color) !== -1;
    }
});

Then use it to find alternative colors.

$(".alternative_images img:color(Green)")

edited Mar 15, 2012 at 12:48

answered Mar 15, 2012 at 12:26

natedavisolds

4,2951 gold badge22 silver badges25 bronze badges

Collectives™ on Stack Overflow

searching for a string in javascript

4 Answers 4

Comments

Comments

1 Comment

UPDATE - if you find yourself doing this a lot you could add a custom selector expression (hat tip: Dogbert for the indexOf expression):

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

UPDATE - if you find yourself doing this a lot you could add a custom selector expression (hat tip: Dogbert for the indexOf expression):

Comments

Your Answer

Sign up or log in

Post as a guest

Related