Заменить теги и двоеточия на несколько тегов
Привет всем!
Хочу заменить <div class="harakteristiki"> <h3>Характеристики</h3> <ul> <li> Двигатель: бензиновый Honda GCV160</li> <li> Мощность (л.с.): 3,8</li> <li> Объём двигателя (см<sup>3</sup>): 160</li> <li> Ширина кошения (см): <b>56</b></li> </ul> </div> на <div class="harakteristiki"> <h3>Характеристики</h3> <ul> <li> <span>Двигатель</span>:<span class="dv"> бензиновый Honda GCV160</span></li> <li> <span>Мощность (л.с.)</span>:<span class="dv"> 3,8</span></li> <li> <span>Объём двигателя (см<sup>3</sup>)</span>:<span class="dv"> 160</span></li> <li> <span>Ширина кошения (см)</span>:<span class="dv"> <b>56</b></span></li> </ul> </div> Поискал в интернете, и попробовал сделать так:
<script type="text/javascript">
document.getElementById('harakteristiki').innerHTML = document.getElementById('harakteristiki').innerHTML.replace(/<li>/g, '<li><span>');
document.getElementById('harakteristiki').innerHTML = document.getElementById('harakteristiki').innerHTML.replace(/\:/g, '<\/span>:<span class="dvoe">');
document.getElementById('harakteristiki').innerHTML = document.getElementById('harakteristiki').innerHTML.replace(/<\/li>/g, '<\/span><\/li>');
</script>
В браузере выглядит как надо, но, мне кажется, что сам браузер, благодаря его уму, просто автоматически закрывает не закрытые теги span и li, но само закрытие тегов работает не корректно. Сделал такой вывод, подставляя разные символы (просто цифры 1 и 2) в разные места этих тегов, типа 1<\/span>2<\/li>. И цифры 1 и 2 выводятся просто вместе 12. Посмотрите, пожалуйста, этот код. Всё ли там правильно работает? Или, может этот код вообще дурацкий и надо делать по другому? |
Можно рег. выражением корректно сделать, а можно и проще:
innerHTML каждой LI разбить (split) по :, затем join. |
Oleg0,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
span{
background-color: #EEE8AA;
color: #0000CD;
}
span.dv{
background-color: #EEE8AA;
color: #FF0000;
}
</style>
</head>
<body>
<div class="harakteristiki">
<h3>Характеристики</h3>
<ul>
<li>
Двигатель: бензиновый Honda GCV160</li>
<li>
Мощность (л.с.): 3,8</li>
<li>
Объём двигателя (см<sup>3</sup>): 160</li>
<li>
Ширина кошения (см): <b>56</b></li>
</ul>
</div>
<script>
var li=document.querySelectorAll('li');
[].forEach.call(li, function(node) {
var html = node.innerHTML;
html = html.split(":");
html = "<span>" + html[0] +"</span>:<span class='dv'>" + html[1] + "</span>"
node.innerHTML = html
});
</script>
</body>
</html>
|
рони,
а просто так?
node.innerHTML = '<span>' + node.innerHTML.split(':').join('</span>:<span class="dv">') + '</span>'
|
laimas,
:) можно, а можно и так
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
span{
background-color: #EEE8AA;
color: #0000CD;
}
span.dv{
background-color: #EEE8AA;
color: #FF0000;
}
</style>
</head>
<body>
<div class="harakteristiki">
<h3>Характеристики</h3>
<ul>
<li>
Двигатель: бензиновый Honda GCV160</li>
<li>
Мощность (л.с.): 3,8</li>
<li>
Объём двигателя (см<sup>3</sup>): 160</li>
<li>
Ширина кошения (см): <b>56</b></li>
</ul>
</div>
<script>
var li=document.querySelectorAll('li');
[].forEach.call(li, function(node) {
var html = "<span>" + node.innerHTML + "</span>";
node.innerHTML = html.replace(":", "</span>:<span class='dv'>");
});
</script>
</body>
</html>
|
рони,
ой не, зачем же дважды требушить содержимое. :) |
Цитата:
ваш вариант + split join (3-4) действия мой + replace (2-3) действия |
Ох и мозговитые вы тут все. Спасибо, вы как всегда лучшие! :dance:
|
рони,
ну если со штангенциркулем тогда пусть. :) |
Тогда уж сразу:
node.innerHTML = node.innerHTML.replace(/(.+?):(.+)/, '<span>$1</span>:<span class="dv">$2</div>'); |
| Часовой пояс GMT +3, время: 18:53. |