Remove white spaces from all tag ids

Question

Please I need some help in removing all the white spaces from all the <li> tag ids. The ids are dynamically generated from the title of a podcast rss feeds. How do I convert all the ids (with white spaces) in the following <li> tags:

<li id="The Purpose of Commitment"> ...some content... </li>
<li id="Take Your Seat"> ...some content... </li>
<li id="The Power of the Soil"> ...some content... </li>
<li id="Seasons of Silence"> ...some content... </li>

into ids (without white spaces). Output example below:

<li id="ThePurposeofCommitment"> ...some content... </li>
<li id="TakeYourSeat"> ...some content... </li>
<li id="ThePoweroftheSoil"> ...some content... </li>
<li id="SeasonsofSilence"> ...some content... </li>

I have searched this forum and found similar questions asked here: how to replace all white spaces in a string and here: replace all spaces in a string. I don't know how to accomplish this on the <li> tags. I really appreciate your help. Thanks

Answer 1

Those IDs should be formattted at the point where they are created, not afterwards.

Your problem are not only spaces...

You're using arbitrary strings as ID, and that could include words with special characters, like i.e: Let's Code → You don't want the ID to be id="Let'sCode" ← notice the '

Solution?

Replace everything other than a letter, digit or underscore (regex token: \W) - with underscore.

$("li[id]").prop('id', (i, id) => id.replace(/\W/g, '_'));

<ul>
  <li id="Let's Code"> WARNING! QUOTES! </li>
  <li id="The Purpose of Commitment"> ...some content... </li>
</ul>

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

Or by using vanilla JS:

document.querySelectorAll('li[id]').forEach(el => el.id = el.id.replace(/\W/g, '_'));

<ul>
  <li id="Let's Code"> WARNING! QUOTES! </li>
  <li id="The Purpose of Commitment"> ...some content... </li>
</ul>

Answer 2

The ids are dynamically generated from the title of a podcast rss feeds <-- You should remove the white-spaces during this process.

---

But if you HAVE TO remove them afterwards, you can do that with pure JavaScript using a simple split() and join() approach like this:

let lists = document.querySelectorAll("#someUl li");
lists.forEach(list => list.id = list.id.split(" ").join(""));

---

Check and run the following Code Snippet for a practical example of the above approach:

/* JavaScript */

let lists = document.querySelectorAll("#someUl li");

lists.forEach(list => list.id = list.id.split(" ").join(""));

<!-- HTML -->
<ul id="someUl">
  <li id="The Purpose of Commitment"> ...some content... </li>
  <li id="Take Your Seat"> ...some content... </li>
  <li id="The Power of the Soil"> ...some content... </li>
  <li id="Seasons of Silence"> ...some content... </li>
</ul>

Answer 3

You can do this with plain Javascript and a regex to replace any number of spaces with nothing:

document.querySelectorAll('li').forEach(li => {
  li.id = li.id.replace(/\s*/g, '');
});

Here is an example which also prints the ids after the transformation:

document.querySelectorAll('li').forEach(li => {
  li.id = li.id.replace(/\s*/g, '');
});

console.log('ids:');
document.querySelectorAll('li').forEach(li => {
  console.log(li.id);
});

<li id="The Purpose of Commitment"> ...some content... </li>
<li id="Take Your Seat"> ...some content... </li>
<li id="The Power of the Soil"> ...some content... </li>
<li id="Seasons of Silence"> ...some content... </li>

Answer 4

If you reference the parent elements inner html and assign it to a js variable you can use a .replace() method to remove the white space and reassign it to the parent.

There may be better ways to do this as I'm quite new myself but I would Google document.getElementbyid().innerhtml.