0

現在、SOAP 呼び出しを使用して API からデータを取得しています。

最終的に次のような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>

この 2 つの部分を別々にスタイルできるようにしたいと思います。数字と説明。すべての数値をスパンでラップすると、「95/65」などのスタイルを適用したくありません。

これが私の論理です：最初のスペースの前のすべてがラップインし、最初のスペースの後<span class="count"></span>のすべてがラップインし<span class="description"></span>ます。スペース自体は削除できます。スペースがない場合は で囲み<span class="description"></span>ます。

この背後にある私の考えは、1000 のような長い数字がある場合、それはまだラップされますが、数字がない場合は、説明のように残りの半分をスタイルするだけです。

このようなことは可能ですか？これを行うのと似ている唯一のコードは次のとおりです。

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

ありがとう

4

2 に答える 2

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-21T23:19:40.147 に答える
0

spans には高さがないことに注意してください。

'2 man Teams'.replace(/^(\d)+\s(.*)$/, "<span class='count'>$1</span><span class='description'>$2</span>";
于 2013-09-21T23:09:25.300 に答える