仅用节点包围文本

Question

我有一些html格式为

<span class="prefix">something</span> (Optional)
Text
<span class="badge">Something else</span> (optional, can be multiple)
<span class="postfix">Another thing</span>

我想在另一个span中包装文本，但不是span s，以便我可以根据需要使用jQuery提取和替换它。我不能编辑生成这个HTML的后端代码。假设我事先不知道第一个span是否会在那里，或者最后会有多少span，是否有任何方法来包装纯文本，以便可以对其进行操作?

我希望得到的输出看起来像这样:

<span class="prefix">something</span>
<span class="txt">Text</span>
<span class="badge">something else</span>...
<span class="postfix">another thing</span>

Answer 1

试试这个:

$('#container').contents()
               .filter(function() { return this.nodeType === 3 })
               .wrap('<span class="txt" />');

基于这个答案:https://stackoverflow.com/a/5291776/616535

Answer 2

1. filter()容器元素的contents()为纯文本节点
2. wrap() them in a span

$('#container').contents().filter(function() {
  return $(this)[0].nodeValue && $(this)[0].nodeValue.trim();
}).wrap('<span class="txt"/>');

.txt{
  color:green;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="container">
  <span class="prefix">something</span>
  Text
  <span class="badge">Something else</span> 
  <span class="postfix">Another thing</span>
</div>