javascript - 如何使用 jquery 在新标签中包装与强标签同级的字符串？

Question

在像下面的示例这样的 html 中，我需要text I need to select使用自定义类将部件包装在 span 标记中，但是如何strong使用 jquery 仅选择不包括其上方标记中的内容的那部分？

<span>
  <strong> random gibberish </strong>
  text I need to select
</span>

编辑：仅.text()在父级上使用是行不通的，因为这会将整个内部 html 转换为文本，包括其中的部分strong

Answer 1

您可以使用 nextSibling.nodeValue 来获取强标记之后的文本。然后，您可以对文本内容执行 replace() 以将标签包裹在其周围 - 我正在使用带有 newClass 和相关样式的跨度来执行此操作。

var strongEl = document.querySelector('strong');
var siblingEl = strongEl.nextSibling.nodeValue;
var spanContent = $('span').html();
var newSpanContent = '<span class="newClass">'+siblingEl +'</span>';
$('span').html(spanContent.replace(siblingEl, newSpanContent));

console.log(siblingEl);

span.newClass {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>
  <strong> random gibberish </strong>
  text I need to select
</span>

Answer 2

您可以使用contents和 eq 函数：

$('span').each(function() {
  $(this).contents().eq(2).wrap('<span class="someClass"/>')
});

.someClass {
color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>
  <strong> random gibberish </strong>
  text I need to select
</span>

Answer 3

您可以使用.after( function )来完成这项工作。所以在函数回调中获取strong使用nextSibling属性的下一个文本并将其包装在span

$("span > strong").after(function(){
  return "<span class='new'>"+$(this.nextSibling).remove().text()+"</div>";  
});

.new {color: red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>
  <strong> random gibberish </strong>
  text I need to select
</span>