Форум

Oleg0 · #1 (**permalink**) 23.05.2018, 21:08

Привет всем!

Хочу заменить

<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.

Посмотрите, пожалуйста, этот код. Всё ли там правильно работает? Или, может этот код вообще дурацкий и надо делать по другому?

laimas · #2 (**permalink**) 23.05.2018, 21:15

Можно рег. выражением корректно сделать, а можно и проще:

innerHTML каждой LI разбить (split) по :, затем join.

рони · #3 (**permalink**) 23.05.2018, 21:19

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>

laimas · #4 (**permalink**) 23.05.2018, 21:36

рони,
а просто так?

node.innerHTML = '<span>' + node.innerHTML.split(':').join('</span>:<span class="dv">') + '</span>'

рони · #5 (**permalink**) 23.05.2018, 21:44

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>

laimas · #6 (**permalink**) 23.05.2018, 21:45

рони,
ой не, зачем же дважды требушить содержимое.

рони · #7 (**permalink**) 23.05.2018, 21:58

Сообщение от laimas

ой не, зачем же дважды требушить содержимое.

это спорно!
ваш вариант + split join (3-4) действия
мой + replace (2-3) действия

Oleg0 · #8 (**permalink**) 23.05.2018, 23:09

Ох и мозговитые вы тут все. Спасибо, вы как всегда лучшие!

laimas · #9 (**permalink**) 24.05.2018, 04:38

рони,
ну если со штангенциркулем тогда пусть.

ruslan_mart · #10 (**permalink**) 25.05.2018, 23:06

Тогда уж сразу:

node.innerHTML = node.innerHTML.replace(/(.+?):(.+)/, '<span>$1</span>:<span class="dv">$2</div>');

Форум

Справочник

Discord чат

Курсы javascript