Удалить определенный тег не удаляя текст
Всем привет
Возник вопрос, организовать удаление определенных тегов не трогая текст который внутри них? Пример есть тег с определенным классом <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 в данном случае не подходит :( будьте добры помогите пожалуйста. |
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>
|
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>
|
Хмм, и правда. Как то про replaceChild я и забыл :( вроде бы совсем недавно читал и забыл.
Спасибо большое :) |
Если всё действительно выглядит так, как в примере, то можно и так:
<!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>
|
Ruslan_xDD,
если конечно не было до того никакой обработки событий |
Можете поможете еще разок?
Данный пример с заменой тега текстом мне нужен был для написания программы поиска и выделения совпадений в тексте, то есть имеется поле ввода, и все что в него введено будет выделяться на странице красным цветом. Вот код всей страницы
<!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>
Когда ввожу текст в первый раз все работает, далее стираю текст и ввожу новый - ошибка :( |
|
Мне без jQuery надо, только на JS
|
arcmag,
там 2% jQuery :) |
| Часовой пояс GMT +3, время: 04:09. |