JQuery - if div text contains the same text stored in an array, wrap that text in new div

Question

I've got a list of divs with the same class that contain brand names, I've been able to get it to run through the divs and store all the brand names (text) in an array with the below:

var brandList = $('.brand').map(function(){
  return $(this).text();
}).get();

console.log(brandList);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="brand">Brand 1</div>
<div class="brand">Brand 2</div>
<div class="brand">Brand 3</div>

I then have a product feed on the same page pulling in products however the brand name and product name are part of the same feed field and I need to separate them on the front end to style them up different.

.productListItem {
display: inline-block;
width:49%;
text-align: center;
}

.productListItem img {
width:100%;
}

<div class="productListItem">
  <img src="https://assets.pernod-ricard.com/nz/media_images/test.jpg?hUV74FvXQrWUBk1P2.fBvzoBUmjZ1wct" />
  <div class="name">Brand 1 Product 1</div>
</div>

<div class="productListItem">
  <img src="https://assets.pernod-ricard.com/nz/media_images/test.jpg?hUV74FvXQrWUBk1P2.fBvzoBUmjZ1wct" />
  <div class="name">Brand 2 Product 2</div>
</div>

<div class="productListItem">
  <img src="https://assets.pernod-ricard.com/nz/media_images/test.jpg?hUV74FvXQrWUBk1P2.fBvzoBUmjZ1wct" />
  <div class="name">Brand 3 Product 3</div>
</div>

I've been doing this with a simple script manually entering each brand text I wanted to isolate (which works fine):

$('.productListItem .name').html(function (index, text) {
    this.innerHTML = text.replace("Brand 1 ", "<div class='brandName'>Brand 1 </div>");
});

However being manual things can be easily missed and I want to keep it all JQuery for site consistency. Seems as the brand list exists on the page and I've managed to store them in an array I want to automate it so for each product on the page it looks at the product name div then loops through the array, and if a brand name in the array matches part of the product name it will isolate the matching brand name in the product name by wrapping a div around it (so I can style it up different).

I've tried to figure this out but I'm still learning and this seems past my knowledge base currently as I haven't even got close (past storing the brands in the array), I've also tried searching for the answer but not had the greatest luck finding something I can understand and adapt to work.

Many thanks in advance

I'm not sure to understand : you have an array with a list of brand, you want to fetch all `productListItem` and if the product brand is one in yoru array, you wrap `
...
` around the name ? — Mickaël Leger, Jul 26 '19 at 07:37
Hi Mickaël, pretty much: I have an array with the brands stored, for each '.productListItem' on the page look at it's child called '.name' and if the text in that child contains one of the brands in the array it then wraps that matching brand part with the '
...
' — Chobbit, Jul 26 '19 at 09:05

Mickaël Leger · Accepted Answer · 2019-07-26T07:58:23.457

Try this :

$(document).ready(function() {
  // Array with the brand you want to wrap a div around
  var brandArray = ["Brand 1", "Brand 2", "Brand 3"];
    
  // You select all your ".productListItem .name" and loop through
  $('.productListItem .name').html(function (index, text) {
    // You keep your current element in a var for after
    var element = this;
    
    // Now you loop through your brand array
    $.each(brandArray, function(key, value) {
      // If the html of your current element includes the brand name of the array
      // You can use "text.includes(value)" too but no IE support according to :
      // https://stackoverflow.com/questions/1789945/how-to-check-whether-a-string-contains-a-substring-in-javascript
      if (text.indexOf(value) !== -1) {
        // You replace the brand by the brand in a div
        $(element).html(text.replace(value, "<div class='brandName'>"+value+"</div>"));
      }
    });
  });

});

.productListItem {
  display: inline-block;
  width:49%;
  text-align: center;
}

.productListItem img {
  width:100%;
}

.brandName {
  display: inline-block;
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="productListItem">
  <img src="https://assets.pernod-ricard.com/nz/media_images/test.jpg?hUV74FvXQrWUBk1P2.fBvzoBUmjZ1wct" />
  <div class="name">Brand 1 Product 1</div>
</div>

<div class="productListItem">
  <img src="https://assets.pernod-ricard.com/nz/media_images/test.jpg?hUV74FvXQrWUBk1P2.fBvzoBUmjZ1wct" />
  <div class="name">Brand 2 Product 2</div>
</div>

<div class="productListItem">
  <img src="https://assets.pernod-ricard.com/nz/media_images/test.jpg?hUV74FvXQrWUBk1P2.fBvzoBUmjZ1wct" />
  <div class="name">Brand 3 Product 3</div>
</div>

<!-- I added this block so you can see it doesn't change -->
<div class="productListItem">
  <img src="https://assets.pernod-ricard.com/nz/media_images/test.jpg?hUV74FvXQrWUBk1P2.fBvzoBUmjZ1wct" />
  <div class="name">Brand 4 Product 4</div>
</div>

I added some CSS for .brandName so you can see that your element have now a div with this class (the red's one)

Is it what you are looking for ?

Thanks this looks like it does what I want, I'm just going to try and adapt it and make sure it works on oursite and I'll get back to you. If it's all good I'll mark it as the answer :) really appreciate the effort and response — Chobbit, Jul 26 '19 at 09:11
That's amazing, it's exactly what I needed and the comments really help thank you :) — Chobbit, Jul 26 '19 at 09:41

JQuery - if div text contains the same text stored in an array, wrap that text in new div

1 Answers1