Question

我目前正在使用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”之类的东西，我不想这样做。

这是我的逻辑：在第一个空格之前的所有内容，包裹在以及中第一个空间包裹之后的所有内容。空间本身可以删除。如果没有空格，请换入。

我的想法背后是，如果有一个很长的数字，如1000，它仍然会被包裹，但如果没有数字，它只会像我描述的那样设计另一半。

这样的事情可能吗？我能找到的唯一代码与此类似：

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

由于

Answer 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;

Answer 2

请记住span没有高度：

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

样式文本不包含在div中

2 个答案: