Javascript - add a span for each letter

Question

I'm trying to replace each letter of a div with many "span".

This code works except for letters with accents like "é". Can you help me please?

$('h2').each(function(){
  $(this).html($(this).text().replace(/(\w)/g, "<span>$&</span>"));
});

Native JS regex has problems with Unicode characters. Do you need to wrap only letters, or any characters? — VisioN, Jul 04 '13 at 08:04
It works with space but it's a good idea to take numbers and special chars if it's possible. I don't know modify this regex... The more important are characters ! — jlafforgue, Jul 04 '13 at 08:05
http://stackoverflow.com/questions/5436824/matching-accented-characters-with-javascript-regexes — steo, Jul 04 '13 at 08:05
you can simplify the loop by using `$('h2').text(function(){ return $(this).text().replace(/(\w)/g, "$&") })` — Arun P Johny, Jul 04 '13 at 08:21

score 7 · Accepted Answer · answered Jul 04 '13 at 08:05

7

You can try with following regex:

/([^\x00-\x80]|\w)/g

answered Jul 04 '13 at 08:05

hsz

3

I know this is super old, but what if we need to also include characters like `& % / \ ( )` – kthornbloom Apr 19 '17 at 14:45
It works. But in case you need to include i.g. a question mark? – Garavani Oct 13 '19 at 20:53

score 5 · Answer 2 · answered Jul 04 '13 at 08:08

5

\w doesn't include diacritic symbols so you need to specify an unicode range, like this

/[a-z\u00C0-\u00F6\u00F8-\017E]/gi

answered Jul 04 '13 at 08:08

Fabrizio Calderan

score 3 · Answer 3 · edited Jun 08 '14 at 08:56

3

My variant without regexp

var html = $('.test').html();
var ret  = "";

$.each(html.split(''), function(k, v) {
   ret += "<span>" + v + "</span>";
});

$('.test').html(ret);

edited Jun 08 '14 at 08:56

Maxime Lorant

answered Jul 04 '13 at 08:14

z1m.in

3 Answers3