從所有刪除空格<li>標簽 ID

Question

請幫助我從所有<li>標簽 ID 中刪除所有空格。 這些 id 是根據播客 RSS 提要的標題動態生成的。 如何轉換以下<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>

進入 ids（沒有空格）。 下面的輸出示例：

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

我搜索了這個論壇，發現這里有類似的問題： 如何替換字符串中的所有空格和這里： 替換字符串中的所有空格。 我不知道如何在<li>標簽上實現這一點。 我真的很感謝你的幫助。 謝謝

Answer 1

這些 ID 應該在創建它們時進行格式化，而不是之后。

您的問題不僅是空格...

您使用任意字符串作為 ID，這可能包括帶有特殊字符的單詞，例如： 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>

或者通過使用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 <-- 您應該在此過程中刪除空格。

---

但是，如果你不得不事后除去它們，你可以用一個簡單的做，與純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>

Answer 3

您可以使用純 Javascript 和正則表達式來執行此操作，以將任意數量的空格替換為空：

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

這是一個示例，它也在轉換后打印 id：

 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

如果您引用父元素內部 html 並將其分配給 js 變量，則可以使用.replace()方法刪除空格並將其重新分配給父元素。

可能有更好的方法來做到這一點，因為我自己很新，但我會谷歌document.getElementbyid().innerhtml 。