I want to add a span class after the first word in a string with jQuery. I am using following code:

$('h1').each(function(){
    var test = $(this);
    test.html( test.text().replace(/(^\w+)/,'<span>$1</span>') );
});

This will work fine with the standard characters, but it won't work with the non-English Characters.

Please see the demo, it should select the whole word "Bài", but it only selects "B". How this can be fixed?

Demo: /

Thanks.

I want to add a span class after the first word in a string with jQuery. I am using following code:

$('h1').each(function(){
    var test = $(this);
    test.html( test.text().replace(/(^\w+)/,'<span>$1</span>') );
});

This will work fine with the standard characters, but it won't work with the non-English Characters.

Please see the demo, it should select the whole word "Bài", but it only selects "B". How this can be fixed?

Demo: http://jsfiddle/hez4ohpc/

Thanks.

• javascript
• jquery
• regex

4 Answers 4

Support for Unicode in JavaScript regular expressions is currently very poor (this will be much better in ES6). In such a case your best option would probably be to use a more plete regular expression solution. The best I know is the XRegExp library.

The second best option would be to try to define what doesn't make a word :

.replace(/([^\s\.,\:;!?]+)/,'<span>$1</span>')

but that's dangerous and you'll expose you to surprises later when you'll realize what caracter you forgot.

Try this:

$('h1').each(function(){
    var test = $(this);
    test.html( test.text().replace(/(^[^\s]+ )/,'<span>$1</span>') );
});

Maybe that?

$('h1').each(function(){
    var test = $(this);
    test.html( test.text().replace(/(^[^\s,\.\:\;\"]+)/,'<span>$1</span>') );
});

Here is an alternative Solution to your Question, with which you have no need to escape or .replace anything.

$('h1').each(function() {
   var html = $(this).html();
   var word = html .substr(0, html.indexOf(" "));
   var rest = html .substr(html.indexOf(" "));
   $(this).html(rest).prepend($("<span/>").html(word).addClass("em"));
});

JSFiddle

EDIT: As discussed in the ments, the downside of this solution is, that it will not work, if the first word is not followed by a space.