我的算法中的缺陷在哪里包含跨度的单词？

Question

所以我有一段代码

// separate pargraph words by spans
$layer.find('p').each(function(){
    var spanned = $(this).html().split(" ").map(function(w){ return '<span class="word">' + w + '</span>'; }).join(" ");
    $(this).html(spanned);
});

尝试在<span class="word">和</span>内包装单词（定义为空格分隔的任何内容），但有些错误，因为它最终会像

一样

所有嵌套和东西。那么我在做什么呢？

Answer 1

可以清楚地看到p标记不仅包含文字，而且还包含一些HTML标记，这会产生此问题，因此不是.html()执行.text()这将返回纯文本。

$layer.find('p').each(function(){
    var spanned = $(this).text().split(" ").map(function(w){ return '<span class="word">' + w + '</span>'; }).join(" ");
    $(this).html(spanned);
});

请注意，这会删除任何标记，例如a或li ...（这取决于您的使用案例），但通过查看您的问题，我不认为您拥有它们。

您可能也希望使用$.trim删除不需要的空格。

Answer 2

这对我来说很有用，

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<p id="something">
    Hello world how is everyone
</p>
<script>
$("#something").each(function(){
    var spanned = $(this).html().split(" ").map(function(w){ return '<span class="word">' + w + '</span>'; }).join(" ");
    $(this).html(spanned);
});
</script>

结果html：

<p id="something"><span class="word">
</span> <span class="word"></span> <span class="word"></span> <span class="word"></span> <span class="word">Hello</span> <span class="word">world</span> <span class="word">how</span> <span class="word">is</span> <span class="word">everyone
</span></p>

我的猜测是

a）你在某处做了一些奇怪的异步事件，

b）你正在获得已经有标签的DOM节点

c）以上所有