Wrap text within <li> using jQuery

Question

I have a string: <li>&File</li> . What I would like to do is analyse the string inside the li element to find the location of the ampersand. Once found, I'd like to wrap the next character inside a span .

The logic behind this is relatively straightforward. Get the string position of & , remove it and then wrap the following character (ie string position + 1) in a span .

Could anyone suggest a suitable method in jQuery to wrap a single character of a string? I know it's possible to wrap a block of HTML, but can one work on strings like this, or would it be better to create a custom function?

I should mention that the position of & will not always be at the beginning of the string, either. I was thinking to use Regular Expressions for finding its position, since I only want to parse the first occurance of an ampersand within the string, thus leaving later occurances untouched.

The ampersand is not a HTML entity - it's simply & (and not & ).

Any help and insight most gratefully received...

Answer 1

Since it's one character, you can just use .replace ; no need for special jQuery functions: http://jsfiddle.net/qr3pe/1/ .

$("li").each(function() {
    var html = $(this).html(),     // this element's html
        regexp = /&(.)/,       // regexp (.html() returns & even
                                   // if the source is &). `()` to capture.
        match = regexp.exec(html); // get the captured character

    if(!match) return; // no match; abort

    var replaced = html.replace(regexp,
                                "<span>" + match[1] + "</span>");

    $(this).html(replaced); // replace the html
});

Answer 2

var text = $("li").text();
var location = text.indexOf("&");
if (location >= 0) { //if there is no &, location will equal -1
  var character = "<span>"+text.slice(location+1,location+2)+"</span>";
  text = text.slice(0,location)+character+text.slice(location+2);
}

If you wanted you could probably fit it all into one line, but I split it up to make it easier to read.

http://jsfiddle.net/q7GA5/1/

Answer 3

var string = '<li>&File</li>';
var el = $(string);
el.html(el.text().replace(/&(.?)/, "<span>$1</span>"));
$(document.body).append(el);

http://jsfiddle.net/8whDz/

Answer 4

If I interpreted your problem correctly, then this should work. ( JsFiddle )

$(document).ready(function() {  
   var m = $('#test').html();  
   var n = m.indexOf('&')  //Of course, you could simply use '&' here, everything else being same.
   var spanLetter = m.substr(n+5, 1);  
   /* Note that '&' is represent as & in HTML and therefore, the logical, n+1 as start param will give 'a' as the result for spanLetter */
   var restString = m.substr(n+6, n.length);  
   alert(n);  
   alert('<span>' + spanLetter + '<span>');  
   alert(restString);  
});  

Answer 5

Try follow:

$(function(){
  $('ul>li:contains(&)').each(function(){
    var text = $(this).text();
    text = text.replace(/^&(\w){1}/, "<span>$1</span>");
    $(this).html(text);
  });
});

You can see example here .

Answer 6

How about this?

function() {
        $("li").each(
            function() {
                $(this).html($(this).text().replace(/&(.)/, '<span>$1</span>'));
            }
        );
    }