substring selector with jquery?

Question

Is it possible to select only part of a string using jquery? For example I have a text

<p>Metuentes igitur idem latrones Lycaoniam magna parte campestrem</p>

So now if the user search for a string, I want it to be highlighted (we use a bold tag for example)

<p>Metuentes igitur idem latrones <b>Lycaoniam</b> magna parte campestrem</p>

And then we can revert back to original string if needed.

1. The first question is whether we can select a substring like this using jQuery, and use jQuery method such as .css() to apply style to that element.
2. The second question is if we don't have such selector, how can we achieve it using jQuery or javascript through string manipulation

Thanks.

UPDATED

Thank for everyone effort. Here is a small program, final result of what I'm looking for http://jsfiddle.net/TPg9p/3/ Cheers!

Answer 1

If you know the element in which to search:

var string = "Lycaoniam";
var e = $("elementSelector"); // put here your selector
e.html(e.html().replace(new RegExp(search, "gi"), "<b>"+search+"</b>"));

for more elements, simply loop through them and do the replacing. To make a toggable styling, I'd use a custom class:

 e.html(e.html().replace(new RegExp(search, "gi"), "<span class='highlight'>"+search+"</span>"));

and remove it with:

$(".highlight").contents().unwrap();

.contents().unwrap() does the trick of stripping not only the class (which must be styled accordingly) but also the tag.

Answer 2

Based on the answer from here: Wrap around part of text inside an element

you could do the following:

$('p').html(function(index, oldHtml){
   return oldHtml.replace(/(amet)/g, '<span>$1</span>');
});

http://jsfiddle.net/YxMvq/

Answer 3

Search for the text and replace the text.

HTML :

<p id="mainText">Metuentes igitur idem latrones Lycaoniam magna parte campestrem</p>
<input type="text" id="inputTextBox" />
<input type="button" id="findButton" value="Find" />

jQuery :

$("#findButton").click(function(){
    var inputText = $("#inputTextBox").val();
    var mainText = $("#mainText").text();
    var updatedText = "<b>" + inputText + "</b>";
    mainText = mainText.replace(inputText, updatedText);
    $("#mainText").html(mainText);
});

Demo

Answer 4

There is no way to do this with pure jQuery. You could do this instead :

var search = 'Lycaoniam';
var orig = $('p').html();
var highlighted = orig.replace(new RegExp(
    search.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'), 'gi'
), '<b>$&</b>');
$('p').html(highlighted);

To revert back to the original text :

$('p').html(orig);

The search.replace(...) part allows to deal with special chars : http://jsfiddle.net/wared/TPg9p/.

Answer 5

Do you know when the HTML is created which word you want? Then I would suggest doing the following instead

<p>Metuentes igitur idem latrones <span class="js-highlightable">Lycaoniam</span> magna parte campestrem</p>`

now if you wanna highlight it just do

$(".js-highlightable").toggleClass("highlighted"); 

Any styles can be defined in the highligthed class. You could also use an id for the span instead if you want to be able to apply the change to only that single element and not all elements with js-highlightable class.