Разрыв строки после второго слова и раскраска

Question

У меня есть название продукта «Pillow BALANCE purple», и я хочу, чтобы после второго слова перерыв строки. Как показано ниже.

Подушка БАЛАНС
фиолетовый

это название имеет класс позволяет сказать, что «название». Я использую следующий код, чтобы изменить цвет первого слова «Подушка», но мне нужно также изменить цвет для второго и, конечно же, сделать третье слово, чтобы перейти ко второй строке. Любая помощь будет оценена.

//add span to first word of module title, page heading 
window.addEvent ('domready', function() { 
    var els = $$('.art-postcontent h2 a, .art-postcontent h2 a:link, .art-postcontent h2 a:hover, .art-postcontent h2 a:visited, .art-blockcontent h2 a, .art-blockcontent h2 a:link, .art-blockcontent h2 a:hover, .art-blockcontent h2 a:visited'); 
    if (!els.length) return; 
    els.each (function(el){ 
     var html = el.innerHTML; 
     var text = el.get("text"); 
     var pos = text.indexOf(' '); 
     if (pos!=-1) { 
      text = text.substr(0,pos); 
     } 
     el.set("html", el.get("text").replace(new RegExp (text), '<span class="first-word">'+text+'</span>')); 

    }); 
}); 

Answer 1

Использование функции split() должно помочь вам здесь.

var str = 'pillow BALANCE purple'; 
var substr = str.split(' '); //splits the string at each space ( ) 

$('#firstLine').text(substr[0] + substr[1]); //adds first two words to first line 
$('#secondLine').text(substr[2]); //add third word to second line 

HTML:

<div id="firstLine"></div> 
<br />  <!-- Break will put the next div on a new line --> 
<div id="secondLine"></div>