Change background color of arbitrary text with javascript

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.

score 2 · Accepted Answer · answered Aug 27 '12 at 08:37

$("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/

Thanks! I didn't know about the `eq(int)` operator. This looks like the best solution proposed, though not quite as elect as I'd dreamed. — fozziethebeat, Aug 28 '12 at 01:00

Ram · Answer 2 · 2012-08-27T08:39:32.217

0

Try this:

$('input[type=text]').keyup(function() {
    var val = $.trim(this.value);
    var text = $('p').text().split(' ')
    $.each(text, function(i, v) {
        if (v == val) {
            text[i] = '<span>'+v+'</span>';
        }
    })
    $('p').html(text.join(' '))   
})

Fiddle

edited Aug 27 '12 at 08:39

answered Aug 27 '12 at 08:32

Ram

143,282
16
168
197

I really like what you've done here, but the OP asked for a way to wrap arbitrary text, not necessarily an individual word. – nnnnnn Aug 27 '12 at 08:47
@nnnnnn Thank-you. Yes, you are correct,_I'd like to wrap arbitrary portions of the text based on user input_ it needs more work. – Ram Aug 27 '12 at 08:53

p3drosola · Answer 3 · 2012-08-27T08:53:44.600

0

This should work. It can easily be turned into a function that takes the word you're looking for as a parameter.

jQuery.textReplace by Ben Alman

$('.text').replaceText( /hello/g, '<span classs="interesting">hello</span>' );

edited Aug 27 '12 at 08:53

answered Aug 27 '12 at 08:45

p3drosola

5,784
2
23
30

1

Really? is `replaceText` a plugin? – Ram Aug 27 '12 at 08:46
whoops, forgot to add the link. – p3drosola Aug 27 '12 at 08:54
Ah, I didn't know about `replaceText` but sadly that doesn't quite fit my goals as I have specific indices I want to highlight, and don't want to mistakenly highlight text with the same substring in other regions. – fozziethebeat Aug 28 '12 at 00:59

Change background color of arbitrary text with javascript

3 Answers3