Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Выделение Range (https://javascript.ru/forum/misc/58879-vydelenie-range.html)

novitocnaforume 15.10.2015 12:06
Выделение Range
 
Здравствуйте.
Реализация выделения отдельных слов текста предлагает оборачивание в тег span: rng.surroundContents(span);
При удалении: removeChild(); или замене replaceChild(); span удаляется со
своим содержимым.
Как элегантно, не городя лишнего удалить тег span?

EmperioAf 15.10.2015 12:16 
display: none;

novitocnaforume 15.10.2015 12:23
Цитата:
Сообщение от EmperioAf (Сообщение 392052) 
display: none;
span удаляется со своим содержимым: span.style.display = "none";

nerv_ 15.10.2015 12:26
Цитата:
Сообщение от novitocnaforume
При удалении: removeChild(); или замене replaceChild(); span удаляется со
своим содержимым.
вам не кажется это логичным?)

EmperioAf 15.10.2015 12:29
Цитата:
Сообщение от novitocnaforume
span удаляется со своим содержимым: span.style.display = "none";
 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ГГ</title>
<style>
.container>span {
   color: red;
}
</style>
</head>
<body>
<div class="container">
  Этот текст  
  <span>как всегда</span>
  ни о чём
</div>
<button>Жми</button>
    <script>
document.querySelector('button').onclick = function(){
  var a = document.querySelector('.container>span');
  var b = getComputedStyle(a).display;
  (b == 'none') ? a.style.display = 'inline' :  a.style.display = 'none';
}
    </script>
</body>
</html>

рони 15.10.2015 12:51
novitocnaforume,
вытащить циклом каждый children childNodes span и вставить перед span потом удалить сам span

novitocnaforume 15.10.2015 12:53
Цитата:
Сообщение от nerv_ (Сообщение 392059)
вам не кажется это логичным?)

Я привел это как факт :)
А вопрос: Как элегантно, не городя лишнего удалить тег span?
Выделенный текст заключен в span его удалять ненужно.

novitocnaforume 15.10.2015 12:55
Цитата:
Сообщение от EmperioAf (Сообщение 392062) 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ГГ</title>
<style>
.container>span {
   color: red;
}
</style>
</head>
<body>
<div class="container">
  Этот текст  
  <span>как всегда</span>
  ни о чём
</div>
<button>Жми</button>
    <script>
document.querySelector('button').onclick = function(){
  var a = document.querySelector('.container>span');
  var b = getComputedStyle(a).display;
  (b == 'none') ? a.style.display = 'inline' :  a.style.display = 'none';
}
    </script>
</body>
</html>
Выделенный текст заключен в span его удалять ненужно.

рони 15.10.2015 13:02
novitocnaforume,
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ГГ</title>
<style>
.container>span {
   color: red;
}
</style>
</head>
<body>
<div class="container">
  Этот текст
  <span>как всегда</span>
  ни о <span>чём</span>
</div>
<button>Жми</button>
    <script>
document.querySelector("button").onclick = function() {
    [].forEach.call(document.querySelectorAll(".container>span"), function(a) {
        for (var b = a.parentNode, c; c = a.childNodes[0];) b.insertBefore(c, a);
        b.removeChild(a)
    })
};
    </script>
</body>
</html>

novitocnaforume 15.10.2015 13:07
Цитата:
Сообщение от рони (Сообщение 392068)
novitocnaforume,
вытащить циклом каждый children childNodes span и вставить перед span потом удалить сам span
Объектах Range имеет много свойств и методов, я думал это можно реализовать элегантно как в примере с оборачиванием в span: rng.surroundContents(span);

novitocnaforume 15.10.2015 15:53
Цитата:
Сообщение от рони (Сообщение 392073)
novitocnaforume,
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ГГ</title>
<style>
.container>span {
   color: red;
}
</style>
</head>
<body>
<div class="container">
  Этот текст
  <span>как всегда</span>
  ни о <span>чём</span>
</div>
<button>Жми</button>
    <script>
document.querySelector("button").onclick = function() {
    [].forEach.call(document.querySelectorAll(".container>span"), function(a) {
        for (var b = a.parentNode, c; c = a.childNodes[0];) b.insertBefore(c, a);
        b.removeChild(a)
    })
};
    </script>
</body>
</html>

До удаления span слово подсвечивается без проблем в любом, месте текста, т. е. создаваля объект Range, граничные точки setStart(); и setEnd();
После удаления span как то влияет на Range: текст в браузере, и по Firebug не сокращается, но в коде уменьшается на обертку span: alert(root.nodeValue); он как метка по которой уменьшаются слова в тексте.
Думал причина в области видимости переменных: выносил запрос за пределы функции.
Похоже решение связано с Range.

рони 15.10.2015 16:00
novitocnaforume,
не осилил

novitocnaforume 15.10.2015 16:09
Цитата:
Сообщение от рони (Сообщение 392102)
novitocnaforume,
не осилил
Спасибо за попытку.

рони 15.10.2015 16:21
novitocnaforume,
может это чем поможет
http://javascript.ru/forum/project/4...-v-tekste.html

novitocnaforume 15.10.2015 16:28
Цитата:
Сообщение от рони (Сообщение 392106)
novitocnaforume,
может это чем поможет
http://javascript.ru/forum/project/4...-v-tekste.html
Большое спасибо, хотел и в карму: выходит alert('вы должны добавить отзыв кому-то еще, прежде чем сможете снова добавить его'); ?


Часовой пояс GMT +3, время: 00:02.