Удалите пробелы из всех идентификаторов тегов <li>

Эти идентификаторы должны иметь значение форматированный в момент их создания, а не после.

Ваша проблема не только пробелы...

Вы используете произвольные строки в качестве идентификатора, и они могут включать слова со специальными символами, например: Let's Code → Вы не хочу, чтобы ID был id = "Let'sCode" ← заметили '

Решение?

Замените все, кроме буквы, цифры или подчеркивания (токен регулярного выражения: \W) — с подчеркиванием.

$("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>

Или с помощью ваниль 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>

Если вы ссылаетесь на внутренний HTML-код родительских элементов и назначаете его переменной js, вы можете использовать метод .replace(), чтобы удалить пробел и переназначить его родительскому элементу.

Возможно, есть лучшие способы сделать это, так как я сам новичок, но я бы погуглил document.getElementbyid().innerhtml.

The ids are dynamically generated from the title of a podcast rss feeds <-- Вы должны удалить пробелы во время этого процесса.

Но если вы ПРИДЕТСЯ удалите их впоследствии, вы можете сделать это с помощью чистого JavaScript, используя простой подход split() и join(), например:

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

Проверьте и запустите следующий Фрагмент кода для практического примера описанного выше подхода:

/* 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>

Вы можете сделать это с помощью простого Javascript и регулярного выражения, чтобы заменить любое количество пробелов ничем:

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

Вот пример, который также печатает идентификаторы после преобразования:

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

console.info('ids:');
document.querySelectorAll('li').forEach(li => {
  console.info(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>