Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   теги в выделенном фрагменте (https://javascript.ru/forum/events/30724-tegi-v-vydelennom-fragmente.html)

woojin 13.08.2012 16:31

теги в выделенном фрагменте
 
приветствую!!!

у меня задача, обернуть выделенный текст спецтегом
но есть проблема, если выделение будет начинаться и заканчиваться внутри какого то тега, тогда надо чтобы открывающийся спецтег устанавливался между тегами в выделенном фрагмента

пример::: выделение начинается после "текст2" и заканчивается после "текст6"
<p>текст1
<span>текст2
{spec}
</span>
<p>текст3</p>
<p>текст4</p>
<p>текст5</p>
<span>текст6
{/spec}
</span>
текст7
</p>
вот так вот не надо что бы было
надо что бы было так:::
<p>текст1
<span>текст2</span>
{spec}
<p>текст3</p>
<p>текст4</p>
<p>текст5</p>
{/spec}
<span>текст6</span>
текст7
</p>

и по этому поводу вопрос::: как сделать так что бы скрипт обработал текст как во втором примере

извините но я не знаю вообще как это сделать так что думаю что вы предложите какой то вариант
заранее спасибо:thanks:

P.S. теги могут быть абсолютно разными, не обязательно SPAN и P

Deff 13.08.2012 16:36

Цитата:

Сообщение от woojin
у меня задача, обернуть выделенный текст спецтегом
но есть проблема, если выделение будет начинаться и заканчиваться внутри какого то тега, тогда надо чтобы открывающийся спецтег устанавливался между тегами в выделенном фрагмента

Пример - это строка текста ? или её еще нужно извлечь из DOM ?

woojin 13.08.2012 17:56

нужно что бы скрипт срабатывал как в примере 2 и при этом ничего из DOM не надо
просто если получится как в примере 1 то поле отображения такой страницы на экране (всё между тегами {spec} заменяется на другой блок) может получится глюк а HTML структуре страницы
так и нужно чтобы была правильная вставка, которая в последствии не будет портить DOM

woojin 13.08.2012 17:57

забыл написать, обёртывание делаю вот такой функцией:::
(function($) {
  $.fn.wrapSelected = function(open, close) {
    return this.each(function() {
      var textarea = $(this);
      var value = textarea.val();
      var start = textarea[0].selectionStart;
      var end = textarea[0].selectionEnd;
      textarea.val(
        value.substr(0, start) + 
        open + value.substring(start, end) + close + 
        value.substring(end, value.length)
      );
    });
  };
})(jQuery);

woojin 13.08.2012 23:28

вот что выдал этот пример:::
<p>текст1
<span>текст2 </span>
{spec}
</p><p>текст3</p>
<p>текст4</p>
<p>текст5</p>
<span>текст6 </span>
{/spec}
текст7
<p></p>

перенос сработал отлично почти так как и хотелось, если бы не закрывающий </p> после открывающего {spec} и не открывающий <p> после "текст7"
может поможете исправить эту ошибку, я в рег.експах вообще ни фига не понимаю((((

woojin 14.08.2012 00:02

извините что непонятно, объяснил, попробую ещё раз:::
нужно чтобы выделенный текст оборачивался неким спец тегом ({spec}и{/spec}), но таким образом что бы открывающий и закрывающий спец теги не находились внутри других тегов, т.е. чтобы они к примеру не резали теги <div>, <p>, <span>, <ul> и т.д.
это нужно сделать для того чтобы в последствии обёрнутый участок текста то же был заменён, на некоторый текст (но это уже при отображении самой страницы)
в то же время {spec}и{/spec} могут находиться внутри <div>, <p>, <span>, <ul> и т.д.

так понятно?

Deff 14.08.2012 00:08

Цитата:

Сообщение от woojin
так понятно?

:-? :write: Так точно товарищь - задачка однако не из простых - думал только из span вынуть

Deff 14.08.2012 01:27

Дзен-трансгуманист,
Туть при данной постановке задачи - рекурсия не слабая -

Воть мой предыдущий код
<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>






<div id=div></div>

<script type="text/javascript">
var str='\
<div>текст1\n\
<span>текст2\n\
{spec}\n\
</span>\n\
<p>текст3</p>\n\
<p>текст4</p>\n\
<p>текст5</p>\n\
<span>текст6\n\
{/spec}\n\
</span>\n\
текст7\n\
</div>';

alert(str)

function Replac(str) {
  var a = document.getElementById( 'div' );

  $(a).append(str);

  var c=$(a).find("span").each(function() {
     var b = $(this).html();//alert('b='+b)
     if(b.indexOf('spec}')!=-1){ //alert(b)

	b = b.replace(/\s*(\{\/?spec\})\s*/ig,' ');
	$(this).text(b);
	$(this).after('\n'+RegExp["$1"]);
alert($(a).html())
     }

}); return $(a).html()}

alert(Replac(str))
</script>


Вынимал из span и переставлял за ним
А тут нужно смотреть оба тега - в одном ли теге - если нет то....
Вдобавок обёртка тегов <p> в теги <p> (в исходной строке) - некоректна - при любой перестановке - Dom нарушается <p - теги абзацев - они не могут перекрывать иные теги абзацов

А как получается при обрамлении <p> (а не div, как Выше

<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>






<div id=div></div>

<script type="text/javascript">
var str='\
<p>текст1\n\
<span>текст2\n\
{spec}\n\
</span>\n\
<p>текст3</p>\n\
<p>текст4</p>\n\
<p>текст5</p>\n\
<span>текст6\n\
{/spec}\n\
</span>\n\
текст7\n\
</p>';

alert(str)

function Replac(str) {
  var a = document.getElementById( 'div' );

  $(a).append(str);

  var c=$(a).find("span").each(function() {
     var b = $(this).html();//alert('b='+b)
     if(b.indexOf('spec}')!=-1){ //alert(b)

	b = b.replace(/\s*(\{\/?spec\})\s*/ig,' ');
	$(this).text(b);
	$(this).after('\n'+RegExp["$1"]);
alert($(a).html())
     }

}); return $(a).html()}

alert(Replac(str))
</script>
(Причём в Опере и Мозилле - траблы слегка разняться

Aetae 14.08.2012 10:48

Тк
Цитата:

Сообщение от woojin (Сообщение 197270)
(всё между тегами {spec} заменяется на другой блок

проще как-то так:
var str='\
<div>текст1\n\
<span>текст2\n\
{spec}\n\
</span>\n\
<p>текст3</p>\n\
<p>текст4</p>\n\
<p>текст5</p>\n\
<span>текст6\n\
{/spec}\n\
</span>\n\
текст7\n\
</div>';

alert(str)
function spec( str ){
	str = str.split(/\{\/?spec\}/);

	str[1] = str[1]
				.replace(/[^<>]+(?=<|$)/g,'')
				.replace(/<(\w+)[^>]*>[\s\S]*<\/\1>/g,'')
	split = str[1].search(/<\w+[^>]*>/)
	return [ 
		str[0] + str[1].substring(0,split),
		str[1].substring(split) + str[2]
	]
}

result = spec(str);
alert(result[0] + '\n{spec}\n{/spec}\n'+result[1])

woojin 14.08.2012 15:03

последний пример вот что выдал
<p>текст1
<span>текст2
</span>
{spec}
{/spec}
<span>
</span>
текст7
</p>

исчезли <p> и </p> которые были между {spec} и {/spec}

может быть поможет ещё одно пояснение::: эта штука должны срабатывать в редакторе текста в админке сайта
и просто оборачивать какой то выделенный фрагмент
затем когда страница во фронт енде отображается, то плагин производит подмену текста между спец тегами
это получается типа блокировки контента до авторизации пользователя, конечно можно всё сделать и на PHP но тогда потребуется перазгрузка страницы, что не приемлимо
хочется чтоб контент разблокировался сразу, без перезагрузки


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