8

I'm trying to figure out function that will help me wrap first word in string into span.

But unfortunately no luck.

Can anyone help me please?

Many Thanks

Dom

Dom
  • 3,126
  • 14
  • 46
  • 68

4 Answers4

24

One way:

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

[ source | try it ]

Basically, for each match (something) you replace the first word with itself ($1) wrapped in <span> tags. The character class \w matches letters, digits, and underscores (thus defining what a "word" is - you may need another definition).

jensgram
  • 31,109
  • 6
  • 81
  • 98
  • Good answer, and if you have your verbage in something such as a "text" field, just be sure to target your destination as something that accepts the HTML markup. – Mark Schultheiss Sep 21 '10 at 12:20
  • 1
    @Dom You're quite welcome :) Re: your comment on @Ben's solution: Yes, you need to iterate via the `.each()` method in order to manipulate several nodes. – jensgram Sep 23 '10 at 06:07
  • 1
    If you're working with unicode characters, you might find searching for everything up-until the first space: /([^\s]+)/ - However with languages like Japanese this won't work. – Chris May 27 '14 at 15:52
4

You ask how to do that in jQuery. I think you'll need a regular expression to litteraly add the span.

Here is an example using jQuery to get a text from the DOM and make the update in the DOM after having added the span to the string with a regular expression.

<div id="container">This is the text</div>
<script type="text/javascript">
jQuery(function($){
    // get the text you want to transform in a variable
    var html = $('#container').html();
    // doing the transformation (adding the span) with a regular expression
    html = html.replace(/^([^\s]*)(.*)/, "<span class=\"first-word\">$1</span>$2");
    // update your text
    $('#container').html(html);

    // or in one line:
    $('#container').html( ('#container').html().replace(/^([^\s]*)(.*)/, "<span class=\"first-word\">$1</span>$2") );
});
</script>

This is what you'll get:

<div id="container"><span class="first-word">This</span> is the text</div>
Ben
  • 674
  • 9
  • 21
  • Unfortunately if I have one '#container' on page it will change them to this same html. It works but only for ID – Dom Sep 22 '10 at 14:50
  • This will work if the HTML is only text, but if there are HTML tags, such as
    being the "first word", it will not work.     – Gregory R. Apr 07 '20 at 05:39
-1
(function () { 
    var node = $("div").contents().filter(function () { return this.nodeType == 3 }).first(),
        text = node.text(),
        first = text.slice(0, text.indexOf(" "));

    if (!node.length)
        return;

    node[0].nodeValue = text.slice(first.length);
    node.before('<span>' + first + '</span><br/>');
})();
Paul Roub
  • 36,322
  • 27
  • 84
  • 93
Inspired Prynce Kaka
  • 197
  • 2
  • 2
  • 15
-1
var first;
var i=0;
$("p").each(function() {
first = $("p")[i].innerHTML;
$("p")[i].innerHTML = "<span class='first'>" + first.slice(0, first.indexOf(' ')) + "</span>" + first.slice(first.indexOf(' '));
i++;
});
Faheem
  • 1