用JS替换带有多个元素的字符串的一部分
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用JS替换带有多个元素的字符串的一部分相关的知识，希望对你有一定的参考价值。
我正在学习JS，但仍然有一些麻烦。我设法编辑WYSIWYG编辑器，允许用户单击插入以下html的按钮“脚注”：
<span class="footnote" data-toggle="tooltip" title="footnote">[FN]</span>
使用一些CSS，我可以在向上计数的元素中放置一个数字：
body
counter-reset: footnotecounter;
span.footnote:before
counter-increment: footnotecounter;
content: counter(footnotecounter);
position: relative;
top: -0.4em;
visibility: visible;
span.footnote
color: #0389b9;
font-size: 0.875rem;
一些HTML的例子：
Here is a text with a note.<span class="footnote" data-toggle="tooltip" title="footnote">[FN]</span> And there will be a second one too!<span class="footnote" data-toggle="tooltip" title="footnote">[FN]</span>
我实际上使用Popper和Twitter Bootstrap在工具提示中显示“脚注”的内容。
现在我尝试做的是从所有[FN]元素中删除span，这些元素具有以下javascript类footnote：
footnotes = document.getElementsByClassName('footnote');
for (var i = 0; i < length; i++)
footnotes[i].replace("[FN]", " ");
这似乎不起作用，但我不知道我的错误在哪里。另外，我猜，因为我将使用JS来改变脚注，所以我不妨完全放弃CSS并使用JS在所有元素中创建一个越来越多的数字，对吧？
这是一个JSFiddle来展示一个现场的例子。
答案
您必须检查脚注节点列表的长度属性。您正在尝试替换元素本身而不是其中的文本。您必须替换元素的textContent或innerText属性。
尝试以下方式：
var footnotes = document.getElementsByClassName('footnote');
for (var i = 0; i < footnotes.length; i++)
footnotes[i].textContent = footnotes[i].textContent.replace("[FN]", " ");
body
counter-reset: footnotecounter;
span.footnote:before
counter-increment: footnotecounter;
content: counter(footnotecounter);
position: relative;
top: -0.4em;
visibility: visible;
span.footnote
color: #0389b9;
font-size: 0.875rem;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
Here is a text with a note.<span class="footnote" data-toggle="tooltip" title="footnote">[FN]</span> And there will be a second one too!<span class="footnote" data-toggle="tooltip" title="footnote">[FN]</span>
</p>以上是关于用JS替换带有多个元素的字符串的一部分的主要内容，如果未能解决你的问题，请参考以下文章