Javascript.RU

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

Удалить определенный тег не удаляя текст
Всем привет
Возник вопрос, организовать удаление определенных тегов не трогая текст который внутри них?
Пример есть тег с определенным классом
<span class="edit"></span>
и мне нужно удалить все теги с таким классом но остальную разметку и внутренний текст оставить не тронутыми.

То есть имеется допустим такая разметка
<body>
«Нетология» представляет <span class="edit">программу онлайн-обучения</span> «HTML-вёрстка: с <b>нуля</b> до первого макета». Участники программы разбирают реальные кейсы и готовят к выходу свои проекты. В конце обучения проходит <span class="edit">защита диплома</span> — выпускники показывают <b>готовые</b> макеты, а преподаватели дают <i>личную</i> консультацию по <span class="edit">каждой работе</span>.
</body>

И после обработки все спаны с указанным классом удаляются
<body>
«Нетология» представляет программу онлайн-обучения «HTML-вёрстка: с <b>нуля</b> до первого макета». Участники программы разбирают реальные кейсы и готовят к выходу свои проекты. В конце обучения проходит защита диплома — выпускники показывают <b>готовые</b> макеты, а преподаватели дают <i>личную</i> консультацию по каждой работе.
</body>

removeChild в данном случае не подходит
будьте добры помогите пожалуйста.
Ответить с цитированием
  #2 (permalink)  
Старый 16.03.2015, 21:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

arcmag,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   .edit{
     background: #FFFF33
   }
  </style>
  <script>
     window.onload=function(){
      var span = document.querySelectorAll('.edit');
      for (var i=0; i<span.length; i++)  {
        var parent = span[i].parentNode, txt = document.createTextNode(span[i].innerHTML);
        parent.replaceChild(txt, span[i])
      }
     }
  </script>
</head>

<body>
«Нетология» представляет <span class="edit">программу онлайн-обучения</span> «HTML-вёрстка: с <b>нуля</b> до первого макета». Участники программы разбирают реальные кейсы и готовят к выходу свои проекты. В конце обучения проходит <span class="edit">защита диплома</span> — выпускники показывают <b>готовые</b> макеты, а преподаватели дают <i>личную</i> консультацию по <span class="edit">каждой работе</span>.
</body>

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

arcmag,
или при определённых условиях так
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   .edit{
     background: #FFFF33
   }
  </style>
  <script>
     window.onload=function(){
      var span = document.querySelectorAll('.edit'), parent = document.body;
      for (var i=0; i<span.length; i++)  {
        parent.replaceChild(span[i].childNodes[0], span[i])
      }
     }
  </script>
</head>

<body>
«Нетология» представляет <span class="edit">программу онлайн-обучения</span> «HTML-вёрстка: с <b>нуля</b> до первого макета». Участники программы разбирают реальные кейсы и готовят к выходу свои проекты. В конце обучения проходит <span class="edit">защита диплома</span> — выпускники показывают <b>готовые</b> макеты, а преподаватели дают <i>личную</i> консультацию по <span class="edit">каждой работе</span>.
</body>

</html>
Ответить с цитированием
  #4 (permalink)  
Старый 16.03.2015, 21:47
Интересующийся
Отправить личное сообщение для arcmag Посмотреть профиль Найти все сообщения от arcmag
 
Регистрация: 06.02.2015
Сообщений: 29

Хмм, и правда. Как то про replaceChild я и забыл вроде бы совсем недавно читал и забыл.
Спасибо большое
Ответить с цитированием
  #5 (permalink)  
Старый 17.03.2015, 08:45
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

Если всё действительно выглядит так, как в примере, то можно и так:

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   .edit{
     background: #FFFF33
   }
  </style>
  <script>
     window.onload = function() {
       document.body.innerHTML = document.body.innerHTML.replace(/<span class="edit">([\s\S]+?)<\/span>/gim, '$1');
     }
  </script>
</head>

<body>
«Нетология» представляет <span class="edit">программу онлайн-обучения</span> «HTML-вёрстка: с <b>нуля</b> до первого макета». Участники программы разбирают реальные кейсы и готовят к выходу свои проекты. В конце обучения проходит <span class="edit">защита диплома</span> — выпускники показывают <b>готовые</b> макеты, а преподаватели дают <i>личную</i> консультацию по <span class="edit">каждой работе</span>.
</body>

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

Ruslan_xDD,
если конечно не было до того никакой обработки событий
Ответить с цитированием
  #7 (permalink)  
Старый 17.03.2015, 09:33
Интересующийся
Отправить личное сообщение для arcmag Посмотреть профиль Найти все сообщения от arcmag
 
Регистрация: 06.02.2015
Сообщений: 29

Можете поможете еще разок?
Данный пример с заменой тега текстом мне нужен был для написания программы поиска и выделения совпадений в тексте, то есть имеется поле ввода, и все что в него введено будет выделяться на странице красным цветом.
Вот код всей страницы
<!DOCTYPE html>
<html>
<head>
<title>Поисковик</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.wrapper{
	margin:10px auto;
	width:880px;
	border:solid 1px #999999;
	background:#FFF;
	padding:35px 7px;
	position:relative;
}
.wrapper input[type="text"]{
	text-align:center;
	position:absolute;
	width:95%;
	margin:0px auto;
	left:5px;
	top:5px;
	right:5px;	
	padding:5px 10px;
	border:solid 1px #CCCCCC;
	outline:0px;
	background:#FC6;
	transition:all .3s;
}
.wrapper input[type="text"]:focus{box-shadow:inset 0px 0px 3px #000000;}
.edit{color:red;}
</style>
<script type="text/javascript">
var span,container;
window.onload = function(){
	span = document.querySelectorAll('.edit');
	container = document.getElementsByClassName("page")[0];
	document.getElementById("myTest").addEventListener("keyup",testRxp);
}
function testRxp(e){
	var myTextSearch = this.value;
	for (var i=0; i<span.length; i++){
		txt = document.createTextNode(span[i].textContent);
		if(txt=="") continue;
		container.replaceChild(txt, span[i]);
	}//удаляем все теги
	if(/^\s$|^$/.test(myTextSearch)) return; // если строка пустая или начинается с пробела прервать функцию
	var regexp = new RegExp(myTextSearch,"g");
	container.innerHTML = container.textContent.replace(regexp,"<span class='edit'>"+myTextSearch+"</span>");
	//заново выделяем все найденные совпадения
	span = document.querySelectorAll('.edit');
	for(var i=0; i<span.length; i++){
		if(span[i].textContent=="") span[i].parentNode.removeChild(span[i]);
	}//удаляем все оставшиеся пустые теги
}
function isUpper(str){
    if (str == str.toUpperCase()) return true; 
    else return false; 
}
</script>
</head>
<body>
<div class="wrapper">
    <input type="text" id="myTest" placeholder="Поиск совпадений">
    <div class="page">
Россия (от греч. Ρωσία — Русь; официально Росси́йская Федера́ция или Росси́я, на практике используется также сокращение РФ) — государство в Восточной Европе и Северной Азии. Население — 146 270 033 чел. (2015), территория — 17 125 187 км². Занимает первое место в мире по территории и девятое место по численности населения.
Столица — Москва. Государственный язык — русский.<br>
Смешанная республика федеративного устройства. В мае 2012 года пост президента занял Владимир Путин, председателя правительства — Дмитрий Медведев.<br>
В составе Российской Федерации находятся 85 субъектов, 46 из которых именуются областями, 22 — республиками, 9 — краями, 3 — городами федерального значения, 4 — автономными округами и 1 — автономной областью.<br>
Россия граничит с девятнадцатью странами (самый большой показатель в мире), включая две частично признанных, из них по суше со следующими государствами: Норвегией, Финляндией, Эстонией, Латвией, Литвой, Польшей, Белоруссией, Украиной, Абхазией, Грузией, Южной Осетией, Азербайджаном, Казахстаном, КНР, КНДР, Монголией, по морю с Турцией, Японией и США.<br>
Отличается значительным этнокультурным разнообразием. Бо́льшая часть (около 75 %) населения относит себя к православию, что делает Россию страной с самым многочисленным православным населением в мире.<br>
По данным Всемирного банка, объём ВВП по ППС за 2014 год составил $3,461 трлн ($24,120 на человека). Денежная единица — российский рубль (усреднённый курс за 2014 год — 36 рублей за 1 доллар США).
</div>
</div>
</body>
</html>

Когда ввожу текст в первый раз все работает, далее стираю текст и ввожу новый - ошибка
Ответить с цитированием
  #8 (permalink)  
Старый 17.03.2015, 12:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

arcmag,
может готовое ?
http://javascript.ru/forum/project/4...-v-tekste.html
Ответить с цитированием
  #9 (permalink)  
Старый 17.03.2015, 13:09
Интересующийся
Отправить личное сообщение для arcmag Посмотреть профиль Найти все сообщения от arcmag
 
Регистрация: 06.02.2015
Сообщений: 29

Мне без jQuery надо, только на JS
Ответить с цитированием
  #10 (permalink)  
Старый 17.03.2015, 13:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

arcmag,
там 2% jQuery
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
проблема со scroll Chrome Элементы интерфейса 2 21.10.2013 14:46
прогкрутка к якорям cOAPerator Общие вопросы Javascript 20 27.08.2013 03:30
нужно заставить одновременно работать слайдер и модальное окно обратной связи kvant355 Javascript под браузер 3 22.07.2013 16:34
Выравнять три дива в одной строке debugx (X)HTML/CSS 9 06.10.2011 12:03