Как получить querySelector для имени, содержащего числа

У меня есть приведенный ниже URL

<h1 id = "header_2" title = "mytitle" data-id = "header_title" class = "sampleclass " xpath = "1">mytitle<span aria-label = "sometest"   class = "sampleclass ">- Saved</span></h1>

Основываясь на идентификаторе (header_2), я хотел получить заголовок. Мой идентификатор также может содержать id = "header_mdfa3fad", но наверняка после "_" он числовой. Как мне написать для него querySelector

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
81
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Вы можете использовать это решение:

const headers = document.querySelectorAll("[id^='header_']");

const titles = [];

headers.forEach((header) => titles.push(header.getAttribute('title')));

// Do something you want with titles array

Также вы можете прочитать больше о селекторах атрибутов здесь

remark 01.10.2022 22:58

Спасибо за ответ, но у меня также есть такой формат заголовка, как header_abc0xys, который мне не нужен. Мое требование состоит в том, чтобы просто получить заголовок_1 (после _ сразу числовое значение).

iamsj 01.10.2022 23:36

Если я вас правильно понял, попробуйте что-то вроде этого:

#select h1 elements with id attribute whose value begins with "header"
headers = document.querySelectorAll("[id^='header_']");

#loop through the elements and extract the part of the attribute value following "_"
for (let header of headers) {
  target = header.getAttribute('id').split('_')[1]

  #check for the presence of a digit
  if (/\d/.test(target)) {
    console.info(header.getAttribute('title'))
  }
}
Ответ принят как подходящий

Вы можете применить регулярное выражение для фильтрации, как это

var divs = [].slice.call(document.querySelectorAll("[id^='header_']")).filter(function(el){
   return el.id.match(/^header_[0-9]+/i);
});

console.info(divs);
<div id = "header_1"></div>
<div id = "header_2"></div>
<div id = "header_3"></div>
<div id = "header_abc"></div>
<div id = "header_xyz"></div>

Другие вопросы по теме