Wrap text within
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 (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...

When parsing the text I would consider using something other than Ampersand to find the letters that need to be modified or wrapped. This is because ampersand is used in HTML and you don't want to make cases for all the special characters. — John Hartsock, Nov 14 '11 at 18:29
@samura Was that a [joke](http://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags/1732454#1732454)? — Andrew, Nov 14 '11 at 18:30
"The ampersand is not a HTML entity - it's simply & (and not `&`)," isn't that invalid? I was under the impression that, as the `&` has significance within html, it was required to be encoded as `&`? — David Thomas, Nov 14 '11 at 18:34

pimvdb · Answer 1 · 2011-11-14T18:40:32.023

2

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 = /&amp;(.)/,       // regexp (.html() returns &amp; 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
});

edited Nov 14 '11 at 18:40

answered Nov 14 '11 at 18:31

pimvdb

151,816
78
307
352

You could combine the regexp, match, and replace part into a single command, and also apply it to all matches instead of just the first with: '
&hello
&world

$1

Gerben

Nov 14 '11 at 18:36

@Gerben: Looking at it, I think `.each` might be a slightly cleaner solution. Thanks, my solution is replacing all `li`s with the first one's html. – pimvdb Nov 14 '11 at 18:39

.each is nicer indeed. But using 4 lines of code instead of just one? – Gerben Nov 14 '11 at 18:50

1

@Gerben: That's just for making place for some comments on each part of the code :) – pimvdb Nov 14 '11 at 18:51

switz · Answer 2 · 2011-11-14T18:36:30.013

1

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/

edited Nov 14 '11 at 18:36

answered Nov 14 '11 at 18:30

switz

24,384
25
76
101

score 1 · Answer 3 · answered Nov 14 '11 at 18:31

1

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

http://jsfiddle.net/8whDz/

answered Nov 14 '11 at 18:31

Alex Wayne

178,991
47
309
337

check123 · Answer 4 · 2011-11-14T18:46:22.497

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

$(document).ready(function() {  
   var m = $('#test').html();  
   var n = m.indexOf('&amp;')  //Of course, you could simply use '&' here, everything else being same.
   var spanLetter = m.substr(n+5, 1);  
   /* Note that '&' is represent as &amp; 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);  
});

score 1 · Accepted Answer · answered Nov 14 '11 at 18:40

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.

answered Nov 14 '11 at 18:40

ValeriiVasin

8,628
11
58
78

:) nice example. I will be careful. Author can prevent this in his own code. :) – ValeriiVasin Nov 14 '11 at 18:47

score 1 · Answer 6 · answered Nov 14 '11 at 18:45

1

How about this?

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

answered Nov 14 '11 at 18:45

James Jithin

10,183
5
36
51

Wrap text within using jQuery

6 Answers6

Wrap text within
using jQuery