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
Add a comment
|
4 Answers
One way:
$('something').each(function(){
var me = $(this);
me.html(me.html().replace(/^(\w+)/, '<span>$1</span>'));
});
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).
3 Comments
Mark Schultheiss
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.
jensgram
@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.
Chris
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.
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>
2 Comments
Dom
Unfortunately if I have one '#container' on page it will change them to this same html. It works but only for ID
Gregory R.
This will work if the HTML is only text, but if there are HTML tags, such as <br> being the "first word", it will not work.
(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/>');
})();
Comments
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++;
});
