文本的樣式件，這不是包裹在一個div

我最終的HTML看起來像這樣：

<div class="component_wrapper"> 
2 man Teams<br> 
20 Min AMRAP<br> 
50 Double Unders<br> 
50 Push Ups<br> 
50 Toes 2 Bar<br> 
50 Push Press 95/65<br> 
50 Heavy Lunges 45/25<br> 
</div>

我希望能夠以不同的風格這兩個部分。數字和描述。如果我將所有數字都包含在一個範圍內，那麼我會將樣式設置爲「95/65」，這是我不想做的。

這裏是我的邏輯：在第一個空間之前的一切，在和第一次空間換行後的所有內容。空間本身可以被刪除。如果沒有空間，請換上。

我這背後的想法是，如果有喜歡的1000較長的數字，它還是會拿到包裹，但如果沒有數，這將只是風格的另一半就像我會說明。

是這樣的可能嗎？唯一的代碼，我能找到類似於這樣做是：

str.substr(0,str.indexOf(' ')); // "2" 
str.substr(str.indexOf(' ')+1); // "man Teams"

感謝

來源

2013-09-21 Henry Bayuzick

我認爲你應該使用的正則表達式查找1個或多個數字字符串的開始。 –

我會遍歷線，使用正則表達式來解析出數字並將它們放入正確的跨度：

var text=element.innerHTML,newtext=""; 
text=text.split("<br>"); 
for(var i=0,l=text.length;i<l;i++){ 
    newtext+=text.replace(/^(\d*)\s(.*)$/,"<span class='count'>$1</span><span class="description">$2</span><br/>"); 
} 
element.innerHTML=newtext;

工作版本

var text=document.getElementById('wod').innerHTML; 
var newtext=""; 
text=text.split("<br>"); 
for(var i=0,l=text.length;i<l;i++){ 
    newtext+=text[i].replace(/(\d*)\s(.*)$/,"<span class='count'>$1</span><span class='description'>$2</span><br/>"); 
} 
document.getElementById('wod').innerHTML=newtext;

來源

2013-09-21 23:19:40

@HenryBayuzick，你的第一個問題是，'getElementsByClassName'想'component_wrapper'，不'.componenet_wrapper'。其次，'getElementsByClassName'返回一個（僞）數組，而不是一個元素;你需要使用'[0]'。你錯誤的是'getElementsByClassName'返回的數組沒有'innerHTML'屬性。 –

這大部分工作，但我不得不做一些語法修改，讓它執行。謝謝！ –

記住span都不具備的高度：

'2 man Teams'.replace(/^(\d)+\s(.*)$/, "<span class='count'>$1</span><span class='description'>$2</span>";

來源

2013-09-21 23:09:25 PHPglue

文本的樣式件，這不是包裹在一個div

回答

相關問題