Question

Is there an easy way to wrap spans around arbitrary text within an html paragraph? For example, given the following original html:

<p>Here is a dandy block of text to color up</p>
<p> WHOAH another paragraph</p>

I’d like to wrap arbitrary portions of the text based on user input. So one set of input might transform this into

<p>Here is a <span style="background:yellow">dandy block</span> of text to color up</p>
<p> WHOAH <span style="background:green">another paragraph</span></p>

While another set of input might create

<p>Here is a<span style="background:yellow">a dandy block</span> of text to color up</p>
<p> WHOAH <span style="background:green">another</span> paragraph</p>

This problem is related to this one and this one, however, the main difference with my goal is that I want the highlights to be permanent, not just temporary selections and I’d also like this to work within p elements rather than textareas.

If it’s possible, I imagine it would look something like using jQuery

var innerText = $('p')[p_index].slice(char_start, char_end).text();
$('p')[p_index].slice(char_start, char_end).html(
    "<span style=\"background:yellow\">"+
    innerText +
    "</span>");

This would (in theory) select the p_index paragraph, grab the range between the given indices and replace it with a newly created span which has the original text nested inside of it. This clearly doesn’t work since subscripting on the jQuery object does not return another inner jQuery object. Though

$("p").slice(0, 1).html("<span style=\"background: blue\">" +
                        $("p").slice(0, 1).text() + 
                        "</span>");

Does exactly what I want on a paragraph level, but not on the within text level. I could use this approach to do the replacement by totally writing each paragraph given the character ranges I have, but if there’s an easy way, I’d greatly appreciate suggestions.

Answer 1

$("p")[p_index]

gives you the actual DOM element that is that paragraph at p_index, so to get the contents of the paragraph you’d need to use:

$("p")[p_index].innerHTML
// OR
$("p")[p_index].textContent

Using jQuery would be easier though. You wouldn’t use the jQuery slice() method to reduce the range to a single element, you’d use the .eq() method. Try something like this:

$('p').eq(p_index).html(function(i,currentText) {
     return currentText.substring(0, char_start) +
            "<span style=\"background:yellow\">" +
            currentText.substring(char_start, char_end) +
            "</span>" +
            currentText.substring(char_end);
});

When you pass a function to the .html() method, jQuery sets the html to whatever you return from the function. jQuery passes the function the current (inner) html of the element so you can process it. (If you do this on a jQuery object containing more than one element your function is called once for each element so they can be processed individually.)

Demo: http://jsfiddle.net/62HHk/