Замена тегов
Есть следующее задание:
"Разработать на языке 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> |
Kost-iv,
цикл нужно идти с конца tags либо в самом цикле проверять не длину а наличие 1 элемента for (i = tagLen-1; i ; i--) -- 1 вариант for (;i = tags[0];)if (i.childNodes.length)-2вариант тоже самое для цикла с j. связано с тем что вы удаляите элементы из tags а это живая коллекция код надо уточнить - но причина эта. |
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> |
рони, У меня мало опыта в js, не могли бы вы пояснить смысл такой записи цикла for: for (;tags[0]; )?
|
Цитата:
for(объявление переменной ненужно; условие нужно; увеличение счётчика ненужно) тоже самое что while (tags[0]) |
Часовой пояс GMT +3, время: 13:30. |