html - 将标题添加到跨度中 - jquery 解决方案

Question

所以我得到了以下跨度：

<span>Not a heading inside yet</span>

这就是我的目标：

<span>Not a <h1>heading</h1> inside yet</span>

我想这很简单，但我找不到适合我任务的解决方案。由于我没有更改 html 的选项，因此需要一个 jquery 解决方案。

标签： htmljquerycss

Answer 1

这是一种方法，虽然我不知道它是否最有效。这依赖于“标题”始终是一个恒定的文本。

const wrapper = $('span');
const part1 = wrapper.text().split('heading')[0];
const part2 = wrapper.text().split('heading')[1];
wrapper.html(`${part1} <h1>heading</h1> ${part2}`);

抓住 span 元素，然后通过标题文本将其拆分。然后重新加入这些部分并将标题文本包装在<h1>.

JSFIDDLE 在这里