Блог

Я пытаюсь добавить следующую логику к приведенной ниже пользовательской переменной Javascript в GTM: «Найдите, содержит ли строка это слово, и верните это слово»

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

  return classes ;
}
  

В приведенном выше коде переменная classes возвращает следующую строку:

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

Я пытаюсь сделать следующее: если строка содержит «tiger», тогда верните «tiger-animal» и только это.

Я применяю эту функцию к разным CTA на одной целевой странице. Каждый CTA имеет константу tiger как часть имени класса. Итак, один CTA — это «tiger-animal», другой «tiger-something», «tiger-word» и т.д. Я ищу логику, которая не зависит от того, что следует после «tiger-«. Если тигр найден, проанализируйте то слово, которое содержит тигра, и верните его.

Обновить:

Приведенное ниже работает сейчас! Спасибо.

 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]
}
  

Обновите код здесь, чтобы он соответствовал тому, что вы упомянули в комментарии. Теперь он возвращает строку, если совпадает, в противном случае возвращает undefined:

 function checkIfTiger(input) {
  const regex = /tiger-[a-z]*/g;
  const found = input.match(regex)
  return found !== null amp;amp; 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

Как насчет использования свойства .includes . Например:

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

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

checkIfTiger()
  

На самом деле, вот версия с меньшим кодом. Он возвращает «tiger-animal», если «tiger» присутствует во всем, что вы проверяете, в противном случае возвращает false:

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

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

checkIfTiger()
  

Если единственное важное изменение, которое вы хотите внести в эту функцию, заключается в том, что она вернет строку "tiger-animal" , если ваша переменная classes содержит подстроку "tiger" , тогда я рекомендую простой оператор if/else, который использует метод .includes() , который возвращает true , содержит ли ваша строка указанную подстроку, или false если она содержит указанную подстроку.не работает. Например:

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

И если вы не чувствуете, что это повредит удобочитаемости, троичный оператор использует меньше строк:

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

Обе эти функции либо вернут classes , либо, если classes содержат подстроку "tiger" , вернут строку "tiger-animal" .

Для любых случайных прохожих, желающих узнать, как проверять наличие подстрок, вот более простая функция, демонстрирующая этот принцип, используя меньше исходного контекста вопроса:

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