Стильные фрагменты текста, которые не обернуты в div

Question

Стильные фрагменты текста, которые не обернуты в div

0

В настоящее время я извлекаю данные из API с помощью вызова SOAP.

Я получаю 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"

благодаря

Henry Bayuzick 22 сен. 2013, в 01:55

Источник

Теги:

javascript

html

css

2 ответа

0

Помните, что span не имеет высоты:

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

PHPglue 21 сен. 2013, в 21:43

Ещё вопросы

Robbie Wxyz · Accepted Answer · 2013-09-21T20-34-00.000Z

Я прокручивал строки, используя регулярное выражение, чтобы разобрать цифры и поместить их в правильные интервалы:

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;

@HenryBayuzick, ваша первая проблема в том, что getElementsByClassName хочет component_wrapper , а не .componenet_wrapper . Во-вторых, getElementsByClassName возвращает (псевдо-) массив, а не элемент; вам нужно использовать [0] . Вы ошибаетесь в том, что массив, возвращаемый getElementsByClassName , не имеет атрибута innerHTML .
Это работало по большей части, но мне пришлось внести некоторые изменения в синтаксис, чтобы заставить его работать. Спасибо!