时间戳

首页 > 解决方案 > 如何使用 jquery 在新标签中包装与强标签同级的字符串？

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

问题描述

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

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

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

标签： javascriptjqueryhtmlnextsibling

解决方案

您可以使用 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>

推荐阅读