Question

在从所有<li>标签ID中删除所有空白时，我需要一些帮助。这些ID是根据Podcast RSS Feed的标题动态生成的。如何转换以下<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>

转换为ID（不带空格）。输出示例如下：

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

我搜索了这个论坛，并在这里发现了类似的问题： how to replace all white spaces in a string和此处：replace all spaces in a string。我不知道如何在<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 <-您应在此过程中删除空格。

但是，如果您随后必须将其删除，则可以使用简单的split()和join()这样的纯JavaScript来做到这一点：

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()方法删除空白并将其重新分配给父元素。

也许我有一个更好的方法，因为我本人还很新，但是我会使用Google document.getElementbyid().innerhtml。

从所有<li>标签ID中删除空格

4 个答案:

解决方案？