javascript - 为未包含在 div 中的文本设置样式

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”之类的样式。

这是我的逻辑: 第一个空格之前的所有内容，都用 <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"

谢谢

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;