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 (i.e. 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

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.