How to use javascript Dom scrapping to grab the div text concatenated with pipe?

JavaScript
1

I have the following code on the webpage it contains multiple divs with a common data attribute for b tag and p tag as prescription name (title) and prescription description, I need to capture title description combination with pipe using DOM scrapping javascript output I need is T1 D1|T2 D2 |T3 D3 and so on in a variable as soon as a user lands on this page how to capture this ?

<div data-v-46636d4a="" class="panel_2N_jF"><div data-v-46636d4a="" data-purpose="selected-prescription"><b data-v-46636d4a="" data-purpose="prescription-name">T1 title1</b> <p data-v-46636d4a="" data-purpose="prescription-description">D1 description1</p></div><div data-v-46636d4a="" data-purpose="selected-prescription"><b data-v-46636d4a="" data-purpose="prescription-name">T2 title 2</b> <p data-v-46636d4a="" data-purpose="prescription-description">D2 description2</p></div><div data-v-46636d4a="" data-purpose="selected-prescription"><b data-v-46636d4a="" data-purpose="prescription-name">T3 title3</b> <p data-v-46636d4a="" data-purpose="prescription-description">D3 description3</p></div> </div></div>

I tried this code and it gives me the result but what if I have multiple divs with b tag and p tag but same data custom attribute like this then how to code this better ?

console.log(document.querySelector("body > div:nth-child(1) > div:nth-child(1) > b").textContent+' '+document.querySelector("body > div:nth-child(1) > div:nth-child(1) > p").textContent+' '+'|'+document.querySelector("body > div:nth-child(1) > div:nth-child(2) > b").textContent+' '+document.querySelector("body > div:nth-child(1) > div:nth-child(2) > p").textContent+' '+'|'+document.querySelector("body > div:nth-child(1) > div:nth-child(3) > b").textContent+' '+document.querySelector("body > div:nth-child(1) > div:nth-child(3) > p").textContent);

2 
const prescriptions = [...document.querySelectorAll("[data-purpose='selected-prescription']")];
const titleDescStr = prescriptions.map(prescription => {
  const [ titleElem, descElem ] = [...prescription.children];
  return titleElem.textContent + ' ' + descElem.textContent;
}).join('|');
console.log(titleDescStr); // displays T1 title1 D1 description1|T2 title 2 D2 description2|T3 title3 D3 description3
3

randelDawson this works like a charm thanks

but 2 question as am new to JS

  1. can i use var instead of const what is the use of const
  2. what is the significance of […

considering my tool is not that advanced to take this advance js code then how to simply the code and write?

4

You should check out our curriculum here and you will learn all about the syntax I provided you.

5

also is it possible for you to transpile this code and send me

6

I will let you work on that.

7