Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.05.2018, 21:08
Интересующийся
Отправить личное сообщение для Oleg0 Посмотреть профиль Найти все сообщения от Oleg0
 
Регистрация: 07.04.2016
Сообщений: 28

Заменить теги и двоеточия на несколько тегов
Привет всем!

Хочу заменить
<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.

Посмотрите, пожалуйста, этот код. Всё ли там правильно работает? Или, может этот код вообще дурацкий и надо делать по другому?
Ответить с цитированием
  #2 (permalink)  
Старый 23.05.2018, 21:15
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

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

innerHTML каждой LI разбить (split) по :, затем join.
Ответить с цитированием
  #3 (permalink)  
Старый 23.05.2018, 21:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

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>
Ответить с цитированием
  #4 (permalink)  
Старый 23.05.2018, 21:36
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

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

node.innerHTML = '<span>' + node.innerHTML.split(':').join('</span>:<span class="dv">') + '</span>'
Ответить с цитированием
  #5 (permalink)  
Старый 23.05.2018, 21:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

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>
Ответить с цитированием
  #6 (permalink)  
Старый 23.05.2018, 21:45
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

рони,
ой не, зачем же дважды требушить содержимое.
Ответить с цитированием
  #7 (permalink)  
Старый 23.05.2018, 21:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

Сообщение от laimas
ой не, зачем же дважды требушить содержимое.
это спорно!
ваш вариант + split join (3-4) действия
мой + replace (2-3) действия
Ответить с цитированием
  #8 (permalink)  
Старый 23.05.2018, 23:09
Интересующийся
Отправить личное сообщение для Oleg0 Посмотреть профиль Найти все сообщения от Oleg0
 
Регистрация: 07.04.2016
Сообщений: 28

Ох и мозговитые вы тут все. Спасибо, вы как всегда лучшие!
Ответить с цитированием
  #9 (permalink)  
Старый 24.05.2018, 04:38
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

рони,
ну если со штангенциркулем тогда пусть.
Ответить с цитированием
  #10 (permalink)  
Старый 25.05.2018, 23:06
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

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

node.innerHTML = node.innerHTML.replace(/(.+?):(.+)/, '<span>$1</span>:<span class="dv">$2</div>');
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Заменить несколько тегов одним replace'ом Ramundo Элементы интерфейса 15 24.09.2018 14:30
Как обернуть каждый тег в несколько DIV содержащих по 1 атрибуту от этих самых тегов? Zaxap Общие вопросы Javascript 10 08.11.2016 11:56
Как заменить тексты ссылок текстами из тегов span при нажатии All_ex74 Элементы интерфейса 13 28.08.2014 08:16
Как упорядочить несколько тегов одновременно son313 jQuery 9 07.07.2013 00:57
Выбрать несколько тегов из DOM Alex78 Events/DOM/Window 1 08.10.2009 17:21