javascript - 第二个单词后换行并着色

Question

我有一个产品标题“Pillow BALANCE Purple”，我想在第二个词之后换行。就像下面这样。

枕头平衡
紫色

这个标题有一个类，可以说“标题”。我使用以下代码来更改第一个单词“Pillow”的颜色，但我也需要更改第二个单词的颜色，当然还要使第三个单词转到第二行。任何帮助将不胜感激。

//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>