CODEWITHSUNDEEP
jqueryhtml
Travis
Travis

Reputation: 2245

HTML / jQuery Replace a space with a br

I am trying to replace the second " " with a <br> via jQuery.

I have it working with a menu item that has 2 words but I need it to break on the second space on some of the menu items.

So I need to have tab1 and tab 2 split at the second space only and tab3 and tab4 split at the first (only space)

I have set up a Fiddle - http://jsfiddle.net/EpntC/

Here is the HTML 

<ul>
  <li id="tab1"><a href="#">Menu Item One</a></li>
  <li id="tab2"><a href="#" >Menu Item Two</a>
  <li id="tab3"><a href="#" >Menu ItemThree</a>
  <li id="tab4"><a href="#" >Menu ItemFour</a>
</ul>

And the jQuery 

$(document).ready(function(){
  var tabs = ["tab3","tab4"];
  $.each(tabs, function(index, value){
  var el = $("#"+value).children("a") 
  var html = el.html().split(" ");
  html = html[0] + "<br>" + html.slice(1).join(" ");
  el.html(html);
  });
});
$(document).ready(function(){
  var tabs = ["tab1","tab2"];
  $.each(tabs, function(index, value){
  var el = $("#"+value).children("a") 
  var html = el.html().split(" ");
  html = html[1] + "<br>" + html.slice(2).join(" ");
  el.html(html);
  });
});

Upvotes: 0

Views: 341

Answers (3)

sbonkosky
sbonkosky

Reputation: 2557

$(function(){
    $('li a').each(function( index ) {
        var aHtml = $(this).html();
        var pos = aHtml.lastIndexOf(' ');
        aHtml = aHtml.substring(0,pos) + '<br/>' + aHtml.substring(pos+1)
        $(this).html(aHtml);
    });
});

JSFiddle:

http://jsfiddle.net/rtT9t/

Upvotes: 2

Jay Blanchard
Jay Blanchard

Reputation: 34416

I took a slightly different approach that still feels a little hacky, but was fun to play with. I might find a way to make it more scalable at some point - http://jsfiddle.net/jayblanchard/EpntC/2/

$('li a').each(function() {
    var thisText = $(this).text();
    var arrText = thisText.split(" ");
    if(arrText.length == 3) {
        var breakAfter = $(arrText).slice(1);
        var breakAfter = breakAfter[0] + '<br />';
        var newText = arrText[0] + ' ' + breakAfter + arrText[2];

    } else if(arrText.length = 2) {
        var breakAfter = $(arrText).slice(0);
        var breakAfter = breakAfter[0] + '<br />';
        var newText = breakAfter + arrText[1];
    }
    $(this).html(newText);
});

Upvotes: 0

couzzi
couzzi

Reputation: 6366

You could split the labels on the space and wrap them in <p> tags to achieve the same effect as <br /> (and IMHO, <br /> should be used sparingly, and not in this case).

$(document).ready(function(){
    $('li a').each(function(){
        var words = $(this).text().split(' ');
        $(this).text('');
        for(word in words){
            var wrapper = $('<p />', {text: words[word]});
            $(this).append(wrapper);
        }
    });
});

Demo fiddle: http://jsfiddle.net/m6jeb/

If you're concerned with the spacing between the words, you can style this via css:

li a p {
   margin: 0;
   padding: 0;
}

Upvotes: 2

Related Questions