При работе с веб-разработкой и манипулированием DOM вы можете столкнуться со сценариями, когда вам нужно найти элемент по его текстовому содержимому в теге <span>. Это может быть полезно для различных целей, например для автоматического тестирования или динамического взаимодействия с определенными элементами на веб-странице. В этой статье мы рассмотрим несколько методов с примерами кода, позволяющих эффективно решить эту задачу.

Метод 1: использование метода JavaScript querySelectorAll()

const spans = document.querySelectorAll('span');
let desiredElement;
spans.forEach(span => {
  if (span.textContent === 'targetText') {
    desiredElement = span;
    return;
  }
});

Метод 2: использование селектора :contains()jQuery

const desiredElement = $('span:contains("targetText")');

Метод 3: реализация XPath для расширенного поиска

const xpath = "//span[contains(text(), 'targetText')]";
const desiredElement = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;

Метод 4. Использование регулярных выражений

const spans = document.getElementsByTagName('span');
let desiredElement;
for (let i = 0; i < spans.length; i++) {
  if (spans[i].textContent.match(/targetText/g)) {
    desiredElement = spans[i];
    break;
  }
}

Метод 5. Создание пользовательской функции

function findElementBySpanText(targetText) {
  const spans = document.getElementsByTagName('span');
  for (let i = 0; i < spans.length; i++) {
    if (spans[i].textContent === targetText) {
      return spans[i];
    }
  }
}
const desiredElement = findElementBySpanText('targetText');

Вот некоторые методы, которые можно использовать для поиска элемента по его текстовому содержимому внутри тега <span>. Каждый метод имеет свои преимущества в зависимости от конкретных требований вашего проекта. Используя эти методы, вы можете эффективно находить элементы на веб-странице и взаимодействовать с ними. Поэкспериментируйте с этими методами и выберите тот, который лучше всего соответствует вашим потребностям.