Copying name from ID and replacing the child description class-CodePudding

I'm trying to find all IDs on a page that start with "PlanningBoard_RadScheduler" so that I can replace their child class "AppointmentDescription" "company"/"lunch" with the name in the title Bobby Bob or Joey Joe (the name being prone to change).

I'm not very familiar with JavaScript so please forgive my mistakes.

<div id="PlanningBoard_RadScheduler_159_0" title="company
Bobby Bob
Planned 3 hours
From 09:00 to 13:00
"  style="height: 36px; width: 70px; left: 2400%; margin-left: 24px;">
                                                                                                                
  <span >company</span><br>
   <span >3 hours</span>
    <a  href="#" style="visibility: hidden;">delete</a>
</div>

<div id="PlanningBoard_RadScheduler_198_0" title="lunch
Joey Joe
Planned 3 hours
From 09:00 to 13:00
"  style="height: 36px; width: 70px; left: 2400%; margin-left: 24px;">
                                                                                                                
  <span >lunch</span><br>
   <span >3 hours</span>
    <a  href="#" style="visibility: hidden;">delete</a>
</div>

Heres what i have so far:

I am able to use querySelector to find instances of "PlanningBoard_RadScheduler" but i'm not sure how to be able to select the names that occur in the title sections and appear after company or lunch.

var element = document.querySelector('[id^=PlanningBoard_RadScheduler]').id

I know i can use the text.replace function to achieve this but i'm not sure how to select the name.

var replacedText = text.replace(/["company"||"lunch" in
"AppointmentDescription" class]/gi, '[Name variable occuring after "lunch", "company" in "PlanningBoard_RadScheduler"'s title]');

Thank you in advance.

CodePudding user response：

you can use the split() method to split the title into an array of lines, then index that to get the name on the second line.

document.querySelectorAll('[id^="PlanningBoard_RadScheduler"]').forEach(div => {
  let name = div.title.split('\n')[1];
  div.querySelector('.AppointmentDescription').innerText = name;
});

<div id="PlanningBoard_RadScheduler_159_0" title="company
Bobby Bob
Planned 3 hours
From 09:00 to 13:00
"  style="height: 36px; width: 70px; left: 2400%; margin-left: 24px;">

  <span >company</span><br>
  <span >3 hours</span>
  <a  href="#" style="visibility: hidden;">delete</a>
</div>

<div id="PlanningBoard_RadScheduler_198_0" title="lunch
Joey Joe
Planned 3 hours
From 09:00 to 13:00
"  style="height: 36px; width: 70px; left: 2400%; margin-left: 24px;">

  <span >lunch</span><br>
  <span >3 hours</span>
  <a  href="#" style="visibility: hidden;">delete</a>
</div>