Как по клику на кнопку получить определённую часть её текста?

Question

[Alisa94]

Есть кнопки, текст которых среди прочего содержит в кавычках id. Как при клике на кнопки выводить в консоль эти id?

<ul>
  <li><button>First - Wall ["143"]</button></li>
  <li><button>Next - Floor ["153"]</button></li>
  <li><button>First - Wall ["654"]</button></li>
  <li><button>Second - Item ["764"]</button></li>
<ul>

При нажатии на первую кнопку в консоли должен получит число 143, при нажатии на вторую - 153...

Answer 1

[0xD34F]

Как достать текст из элемента:

const getText = el => el.textContent;
// или
const getText = el => el.innerText;
// или
const getText = el => el.innerHTML;
// или
const getText = el => el.lastChild.nodeValue;
// или
const getText = el => el.childNodes[0].data;

Как вырезать из текста нужный кусок:

const getValue = text => text.match(/"(.*?)"/)[1];
// или
const getValue = text => text.split('"').slice(-2).shift();
// или
const getValue = text => text.replace(/^.*?"|"[^"]*$/g, '');
//
const getValue = text => `${/(?<=")[^"]+/.exec(text)}`;
// или
const getValue = text =>
  JSON.parse(text.slice(-~text.indexOf('['), text.indexOf(']')));

Как обработать клики:

document.querySelectorAll('li button').forEach(function(n) {
  n.addEventListener('click', this);
}, e => console.log(getValue(getText(e.target))));

// или

document.querySelector('ul').addEventListener('click', ({ target: t }) => {
  if (t.tagName === 'BUTTON') {
    console.log(getValue(getText(t)));
  }
});

Comments

[Alisa94]

Спасибо большое это то что было нужно!...

Я был бы очень благодарен, если вы подсказали... Эти id у меня хранятся в массиве и генерируются на странице, но вышло так, что мне нужно взять их не из страницы, а из массива. Не могли ли вы подсказать, как я могу извлечь их из массива подобным же образом и так же при клике на конкретную кнопку получить её id? Я уже присвоил каждой кнопки свой id, но как извлечь их не знаю.
Заранее очень благодарен.

<ul>
  <li><button id="143">First - Wall ["143"]</button></li>
  <li><button id="153">Next - Floor ["153"]</button></li>
  <li><button id="654">First - Wall ["654"]</button></li>
  <li><button id="764">Second - Item ["764"]</button></li>
<ul>

[0xD34F]

Alisa94, e.target.id.

[Alisa94]

0xD34F, ok, огромнейшее спасибо.