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>

我希望能够以不同的方式设置这两个部分的样式。数字和描述。如果我将所有数字包装在一个跨度中，那么我将设置我不想做的“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 回答