jquery wrap span to each words in an article

Question

I am trying to wrap span to each words in an article. (jquery1.10.1.js) I think split -> each loop -> replace, but nothing changed in the article, where is the problem? Thanks.

http://jsfiddle.net/ZukAT/

var words=$("#my-div").text().split(' ');
$.each(words,function(i,val){
  val.replace(val,val.wrap('<span class="my-span"></span>')+' ');
});
<div id="my-div">
<h2><span class="mw-headline" id="History">History</span><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Ruby_on_Rails&amp;action=edit&amp;section=1" title="Edit section: History">edit</a><span class="mw-editsection-bracket">]</span></span></h2>
<p><a href="/wiki/David_Heinemeier_Hansson" title="David Heinemeier Hansson">David Heinemeier Hansson</a> extracted Ruby on Rails from his work on <a href="/wiki/Basecamp_Classic" title="Basecamp Classic">Basecamp</a>, a project management tool by <a href="/wiki/37signals" title="37signals">37signals</a> (now a <a href="/wiki/Web_application" title="Web application">web application</a> company).<sup id="cite_ref-interview-davidhh_3-0" class="reference"><a href="#cite_note-interview-davidhh-3"><span>[</span>3<span>]</span></a></sup> Hansson first released Rails as open source in July 2004, but did not share <a href="/wiki/Commit_(data_management)" title="Commit (data management)">commit</a> rights to the project until February 2005.<sup id="cite_ref-core_4-0" class="reference"><a href="#cite_note-core-4"><span>[</span>4<span>]</span></a></sup> In August 2006, the framework reached a milestone when <a href="/wiki/Apple_Inc." title="Apple Inc.">Apple</a> announced that it would ship Ruby on Rails with <a href="/wiki/Mac_OS_X_Leopard" title="Mac OS X Leopard">Mac OS X v10.5 "Leopard"</a>,<sup id="cite_ref-5" class="reference"><a href="#cite_note-5"><span>[</span>5<span>]</span></a></sup> which was released in October 2007.</p>
<p>Rails version 2.3 was released on March 15, 2009 with major new developments in templates, engines, <a href="/wiki/Rack_(web_server_interface)" title="Rack (web server interface)">Rack</a> and nested model forms. Templates enable the developer to generate a skeleton application with custom <a href="/wiki/RubyGems" title="RubyGems">gems</a> and configurations. Engines give developers the ability to reuse application pieces complete with routes, view paths and models. The Rack web server interface and Metal allow one to write optimized pieces of code that route around ActionController.<sup id="cite_ref-Rails_2.3:_Templates.2C_Engines.2C_Rack.2C_Metal.2C_much_more.21_6-0" class="reference"><a href="#cite_note-Rails_2.3:_Templates.2C_Engines.2C_Rack.2C_Metal.2C_much_more.21-6"><span>[</span>6<span>]</span></a></sup></p>
<p>On December 23, 2008, <a href="/wiki/Merb" title="Merb">Merb</a>, another web application framework, was launched, and Ruby on Rails announced it would work with the Merb project to bring "the best ideas of Merb" into Rails 3, ending the "unnecessary duplication" across both communities.<sup id="cite_ref-The_day_Merb_joined_Rails_7-0" class="reference"><a href="#cite_note-The_day_Merb_joined_Rails-7"><span>[</span>7<span>]</span></a></sup> Merb was merged with Rails as part of the Rails 3.0 release.<sup id="cite_ref-8" class="reference"><a href="#cite_note-8"><span>[</span>8<span>]</span></a></sup><sup id="cite_ref-9" class="reference"><a href="#cite_note-9"><span>[</span>9<span>]</span></a></sup></p>
</div>

I think the better question is, why are you needing to do this? — Blazemonger, Jan 27 '14 at 14:54
Adding to what Blaze said, *why do you need the spans you have?* You can style headings, paragraphs, etc. with CSS just as easily as you can with spans. And you can have multiple classes applied to one element using a space: `class="one two"` — Zach Saucier, Jan 27 '14 at 14:56

Alex W · Answer 1 · 2014-01-27T16:03:51.310

0

This method worked for me:

var words=$("#my-div").text().split(' ');
for(var i = 0; i < words.length; i++)
{
    words[i] = "<span>"+words[i]+"</span>";
}
var newHTML = words.join(" ");
$("#my-div").html(newHTML);

You will have to apply this method to your text, before you surround it with HTML. Otherwise, you should just use jQuery to select the HTML elements that are already surrounding the words and apply CSS to them instead of wrapping them in a span.

http://jsfiddle.net/x3LeB/

edited Jan 27 '14 at 16:03

answered Jan 27 '14 at 14:57

Alex W

37,233
13
109
109

@Alex W, so this would remove all the original html tags, But I want to remain them. – fish man Jan 27 '14 at 15:01
Well, that's how `.text()` works. It would seem your original code has multiple problems. So I ask again: what is your *ultimate* goal in doing this? – Blazemonger Jan 27 '14 at 15:03
@fishman No. You [shouldn't use regex](http://stackoverflow.com/questions/701166/can-you-provide-some-examples-of-why-it-is-hard-to-parse-xml-and-html-with-a-reg) to parse HTML. You should wrap your pure text in spans first, and then add the HTML around it, to avoid that. And I don't understand why you accepted justtal's answer, since it severely breaks your HTML?? – Alex W Jan 27 '14 at 15:36
@Alex W, Maybe this answer helps him the most. He can put some "ignore words" for not breaking the html. I don't understand the propose of this question actually. :\ – justtal Jan 27 '14 at 15:55

score 0 · Accepted Answer · answered Jan 27 '14 at 15:15

You can do something like this:

http://jsfiddle.net/ZukAT/2/

$(document).ready(function(){
    var words = $("#my-div").text().split(' ');
    var html = $("#my-div").html();

    $.each(words,function(i,val){
        html = html.replace(val,'<span class="my-span">'+val+'</span> ');
    });

    $("#my-div").html(html)
});

B-u-t it will replace also HTML if the is word like "class" in the text :\

What exactly you want to do? Y do you need it?

jquery wrap span to each words in an article

2 Answers2