html - Add heading into a span - jquery solution

Question

So I got the following span:

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

This is what I am targeting:

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

I guess it is pretty simple but I couldn't find a solution yet that fits to my task. Since I don't have the option to change the html, a jquery solution would be needed.

question from:https://stackoverflow.com/questions/65908437/add-heading-into-a-span-jquery-solution

Answer 1

Here is one method, although I don't know if it is the most efficient. This relies on 'heading' always a being constant text.

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

Grab the span element, then split it by heading text. Then rejoin the parts and wrap the heading text inside a <h1>.

JSFIDDLE here