How do I search for a substring within a string and return that string

Question

I'm trying to add the following logic to the below Custom Javascript variable within GTM: "Find if a string contains this word, and return that word"

function() {
  var el = {{Click Element}};
  el = el.parentElement;
  var classes = el.className;

  return classes ;
}

In the above code the classes variable returns the following string:

'wp-block-button jungle-cta tiger-animal'

I'm trying to do the following: if the string contains "tiger" then return "tiger-animal" and only that.

I am applying this function on different CTAs on the same landing page. Each CTA has a tiger constant as part of the class name. So one CTA is "tiger-animal", the other "tiger-something", "tiger-word" etc. I'm looking for logic that is agnostic of what follows after "tiger-". If the tiger is found then parse that word which contains the tiger and return it.

Update:

The below works now! Thank you.

function() {
  var el = {{Click Element}};
  el = el.parentElement;
  var classes = el.className;
  var regex = /tiger-[a-z]*/g;
  var found = classes.match(regex);
  return found[0]
}

can you please include an example of the unsuccessful code you've tried? — You Old Fool
– You Old Fool, Commented Oct 3, 2020 at 2:49
I don't know why every GTM user here on stackoverflow is so dead set against using GTMs built in features. Use a regex table and feed it with the class variable, that will allow you to maintain a regex for each use case and you won't have to do custom coding. — Eike Pierstorff
– Eike Pierstorff, Commented Oct 4, 2020 at 20:34

ytrkptl · Accepted Answer · 2020-10-03 04:07:44Z

1

Updating the code here to match what you mentioned in the comment. It now returns the string if matches, otherwise returns undefined:

function checkIfTiger(input) {
  const regex = /tiger-[a-z]*/g;
  const found = input.match(regex)
  return found !== null && found[0]
}

checkIfTiger("fsd adfj adkfj tiger-adsf dfadf")
// returns "tiger-asdf"

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match

How about using the .includes property. For example:

let a = 'wp-block-button jungle-cta tiger-animal'

function checkIfTiger() {
  if(a.includes("tiger")) {
    return "tiger-animal"
  }
}

checkIfTiger()

Actually, here is a version with lesser code. It return "tiger-animal" if "tiger" is present in whatever you're checking, otherwise returns false:

let a = 'wp-block-button jungle-cta tiger-animal'

function checkIfTiger() {
  return a.includes("tiger") && "tiger-animal"
}

checkIfTiger()

edited Oct 3, 2020 at 4:07

answered Oct 3, 2020 at 1:49

ytrkptl

1087 bronze badges

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

3 Comments

Obi-Wan Over a year ago

Thank you for the information. What I forgot to mention is that I am applying this function on different CTAs on the same landing page. Each CTA has tiger constant as part of the class name. So one CTA is "tiger-animal", "tiger-something", "tiger-word" etc. I'm looking for logic that is agnostic of what follows after "tiger-". If tiger is found then parse that word which contains tiger and return it.

Obi-Wan Over a year ago

Thanks again. I tried your logic with my existing code but GTM returns undefined. Updated the description.

ytrkptl Over a year ago

Yeah, thanks for letting me know. I am not sure about GTM. I guess you mean Google Tag Manager?

birdstopher birlumbus · Accepted Answer · 2020-10-03 02:45:44Z

1

If the only important change you're looking to make to this function is that it will return the string "tiger-animal" if your variable classes contains the substring "tiger", then I recommend a simple if/else statement that makes use of the .includes() method, which returns true if your string contains a specified substring, or false if it doesn't. For example:

function() {
  var el = {{Click Element}};
  el = el.parentElement;
  var classes = el.className;
  
  if (classes.includes("tiger")) {
    return "tiger-animal";
  } else {
    return classes;
  }
}

And if you don't feel like it'll hurt readability, the ternary operator uses fewer lines:

function() {
  var el = {{Click Element}};
  el = el.parentElement;
  var classes = el.className;
      
  return (classes.includes("tiger") ? "tiger-animal" : classes)
}

Both of these functions will either return classes, or, if classes contains the substring "tiger" it will return the string "tiger-animal".

For any casual passersby wanting to know how to check for substrings, here's a more barebones function demonstrating this principle using less of the question's original context:

function tigerChecker(string) {
      let classes = string
      
      if (classes.includes("tiger")) {
        return "tiger-animal";
      } else {
        return classes;
      }
    }

answered Oct 3, 2020 at 2:45

birdstopher birlumbus

112 bronze badges

1 Comment

Obi-Wan Over a year ago

Thank you for the information. What I forgot to mention is that I am applying this function on different CTAs on the same landing page. Each CTA has tiger constant as part of the class name. So one CTA is "tiger-animal", "tiger-something", "tiger-word" etc. I'm looking for logic that is agnostic of what follows after "tiger-". If tiger is found then parse that word which contains tiger and return it.

Collectives™ on Stack Overflow

How do I search for a substring within a string and return that string

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related