Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.11.2015, 15:27
Новичок на форуме
Отправить личное сообщение для Kost-iv Посмотреть профиль Найти все сообщения от Kost-iv
 
Регистрация: 01.11.2015
Сообщений: 2

Замена тегов
Есть следующее задание:

"Разработать на языке HTML описание страницы, содержащей произвольный текст с тэгами <b>, <i>, <u>, <s> , кнопку «Форматировать» и описание внедренного листа стилей CSS с 4 классами, которые соответствуют оформлению текста .bold, .italic, .underline, .striked.
Нажатие на кнопку «Форматировать» запускает скрипт, который при нахождении любого из вышеперечисленных тэгов заменяет его на <span>. Для сохранения исходного оформления атрибут class замещающего тэга <span> должен соответствовать действию заменяемого тега. Замена выполняется полностью для всех перечисленных тэгов, встречающихся в тексте независимо от уровня вложенности."

Я написал следующий код, но при его работе содержимое заменяемого тега не копируется в новосозданный тег span, в результате чего содержимое теряется. Подскажите, где я ошибся, уже всю голову сломал:
<html>
<head>
<meta http-equiv="Content-Language" content="ru">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Замена тегов</title>
<style>
.bold{font-weight:bold;}
.italic{font-style:italic;}
.underline{text-decoration:underline;}
.striked{text-decoration:line-through;}
</style>
<script>
function startFormat(){
replaceTag("b");
replaceTag("i");
replaceTag("u");
replaceTag("s");
}
function replaceTag(tag){
var tags = document.body.getElementsByTagName(tag);//поиск тегов
var tagLen = tags.length;
var i=0, j=0;
for (i = 0; i < tagLen; i++){//перебор найденных тегов
     var span = document.createElement('span');//создаем новый тег
     if (tags[i].childNodes.length){//если есть потомки у тега
        var list = tags[i].childNodes;
        for (j = 0; j < list.length; j++){//добавляем потомков к новому тегу 
	    span.appendChild(list[j]);
        } 
     } 
     tags[i].parentNode.replaceChild(span,tags[i]); //заменяем тег
     switch(tag) {//применение стиля в зависимости от тега
        case "b":
	   span.setAttribute("class","bold");
	   break;
        case "i":
	   span.setAttribute("class","italic");
	   break;
        case "u":
	   span.setAttribute("class","underline");
	   break;
        case "s":
	   span.setAttribute("class","striked");
	   break;
      }
}
}
</script>
</head>
<body>Текст для проверки, а вот и <b>проверка и <b>подпроверка</b></b> <i>проверка<b>2</b></i> и <u>проверка3</u> и <s>проверка4</s> а теперь нет <b>проверки</b>.<p><input name="Button" type="button" value="Форматировать" onclick="startFormat()"></p></body>

</html>
Ответить с цитированием
  #2 (permalink)  
Старый 01.11.2015, 15:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Kost-iv,
цикл нужно идти с конца tags либо в самом цикле проверять не длину а наличие 1 элемента
for (i = tagLen-1; i ; i--) -- 1 вариант
for (;i = tags[0];)if (i.childNodes.length)
-2вариант
тоже самое для цикла с j.
связано с тем что вы удаляите элементы из tags а это живая коллекция
код надо уточнить - но причина эта.

Последний раз редактировалось рони, 01.11.2015 в 16:00.
Ответить с цитированием
  #3 (permalink)  
Старый 01.11.2015, 16:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Kost-iv,
<html>
<head>
<meta http-equiv="Content-Language" content="ru">
<meta charset="utf-8">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Замена тегов</title>
<style>
.bold{font-weight:bold;}
.italic{font-style:italic;}
.underline{text-decoration:underline;}
.striked{text-decoration:line-through;}
span{
  color: red;
}
span span{
  color:  rgba(0, 128, 0, 1);
}
</style>
<script>
function startFormat(){
replaceTag("b");
replaceTag("i");
replaceTag("u");
replaceTag("s");
}
function replaceTag(tag){
var tags = document.body.getElementsByTagName(tag);//поиск тегов
var tagLen = tags.length;
var i=0, j=0;
for (;tags[0];){//перебор найденных тегов
     var span = document.createElement('span');//создаем новый тег
     if (tags[0].childNodes.length) {//если есть потомки у тега
        var list = tags[0].childNodes;
        for (; list[0]; ){//добавляем потомков к новому тегу
	    span.appendChild(list[0]);
        }
     }
     tags[0].parentNode.replaceChild(span,tags[0]); //заменяем тег
     switch(tag) {//применение стиля в зависимости от тега
        case "b":
	   span.setAttribute("class","bold");
	   break;
        case "i":
	   span.setAttribute("class","italic");
	   break;
        case "u":
	   span.setAttribute("class","underline");
	   break;
        case "s":
	   span.setAttribute("class","striked");
	   break;
      }
}
}
</script>
</head>
<body>Текст для проверки, а вот и <b>проверка и <b>подпроверка</b></b> <i>проверка<b>2</b></i> и <u>проверка3</u> и <s>проверка4</s> а теперь нет <b>проверки</b>.<p><input name="Button" type="button" value="Форматировать" onclick="startFormat()"></p></body>

</html>
Ответить с цитированием
  #4 (permalink)  
Старый 01.11.2015, 16:33
Новичок на форуме
Отправить личное сообщение для Kost-iv Посмотреть профиль Найти все сообщения от Kost-iv
 
Регистрация: 01.11.2015
Сообщений: 2

рони, У меня мало опыта в js, не могли бы вы пояснить смысл такой записи цикла for: for (;tags[0]; )?

Последний раз редактировалось Kost-iv, 01.11.2015 в 16:46.
Ответить с цитированием
  #5 (permalink)  
Старый 01.11.2015, 17:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Kost-iv
смысл такой записи цикла for: for (;tags[0]; )?
пока первый элемент существует -- что-то делаем
for(объявление переменной ненужно; условие нужно; увеличение счётчика ненужно)
тоже самое что
while (tags[0])
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Замена Тегов в textarea arahmanov Элементы интерфейса 4 29.08.2015 09:27
Замена тегов HTML dizzikz (X)HTML/CSS 7 16.02.2013 20:26
DOM модель подсчет тегов документа kent666 Events/DOM/Window 4 17.10.2011 21:51
Замена тегов. 259bit jQuery 1 25.08.2011 12:29
Перебор вложенных тегов. werdes jQuery 0 27.07.2010 11:51