Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Вставить "ЧТО ТО" в середину текста (https://javascript.ru/forum/events/50673-vstavit-chto-v-seredinu-teksta.html)

123456 07.10.2014 03:02

Вставить "ЧТО ТО" в середину текста
 
Всем доброй ночи!

Имею сайт с кучей текста и задолбали уже растаскивать эти тексты по своим сайтам все кому не лень, естественно без обратной ссылки. Решил вставлять в середину текста скрытый спан размером 1х1px с ссылкой на мой сайт.

Cделал такое на PHP, но из-за очень сильно поднявшейся нагрузки на сервер - пришлось отключить (делать с кешированием я еще не умею). + то что поисковики видят такую штуку прямо посреди текста, еще и скрытую думаю не очень хорошо.

Решил сделать такую же штуку, но на JS. Но никак не могу понять как на нем это реализовать, с PHP вроде попроще было когда делал.

Исходные данные:
- текст НЕ разделен тегами р, div и т.п. Идет как один сплошной текст, в некоторых случаях присутствую теги <br> (иногда сдвоенные), но не всегда, так что на это упор делать не нужно - нужно делить по количеству слов.
- очень и очень желательно реализовать данную штуку на JQuery, так как в нем я хоть как-то разбираюсь, а вот с чистым JS у меня туго.

Буду очень признателен, если поможете. Заранее спасибо всем откликнувшимся!

PS: Гуглил, нашел такую штуку: http://kachkarvv.ru/src-htm/simbols-counter.php

Думаю можно оттуда что то позаимствовать, но не могу понять как и что именно...

krasovsky 07.10.2014 09:09

Это не задача javascript.
Можно попытаться реализовать на html. К примеру запрет выделения текста :
-moz-user-select: none; 
	-khtml-user-select: none; 
	-webkit-user-select: none; 
	-o-user-select: none;

Если вставить нужно обязательно ссылку то впринципе вот такой класс сделает ее невидимой

.invisible {
display: inline-block;
width: 0;
height: 0;
opacity:0;
}

вместо opacity который не поддерживается старьем можно использовать text-indent c большими значениями, чтоб текст ссылки ушел за экран.

http://habrahabr.ru/post/18080/
Статья в которой чувак на js запрещает, мое мнение - лишний код,ибо защита от дурня.

danik.js 07.10.2014 09:43

Открываешь консоль, вводишь там $('.invisible').remove() - и "защита" отключена ))

krasovsky 07.10.2014 09:49

Цитата:

Сообщение от danik.js (Сообщение 333802)
Открываешь консоль, вводишь там $('.invisible').remove() - и "защита" отключена ))

Дело ясное, к счастью у наших копипастеров работает только два пальца на каждой руке - под ctrl-c/ctrl-v слева и под Mouse1/Mouse2 справа. Да и до .remove() тоже еще надо додуматься.

Хотел тоже про консоль написать но подумал зачем копипастерам давать наводку?

danik.js 07.10.2014 10:11

Кажется консоль как-то можно отключить...

Viral 07.10.2014 10:14

danik.js, О_о как?

Aetae 07.10.2014 11:11

Есть способы детектирования. Но букмарклет не отключишь в любом случае.)

krasovsky 07.10.2014 11:18

Цитата:

Сообщение от danik.js
Кажется консоль как-то можно отключить...

не не. По крайней мере не со стороны клиентского\серверного кода. Возможно с каким нибудь параметром запуска браузера.
А при загрузке попросить пользователя перезапустить браузер в таком то режиме )

Alex1233 08.10.2014 00:18

Ребят, не-не-не. Все что Вы тут предлагаете - это не то и не годится. Не нужно ничего запрещать копировать (это с легкостью обходится - я в курсе), нужно просто сделать чтобы в середину текста при копировании добавлялась ссылка на мой сайт, и все.

И как сделать невидимой эту ссылку я в курсе. Мне нужно только автоматизировать процесс подстановки такой ссылки в середину каждого текста на сайте, причем чтобы нагрзка была на клиентской стороне а не на серверной (т.е. PHP не подходит).

Почему это нереально сделать - не пойму? На PHP я ведь это реализовал. И ссылку привел на код который считает слова. Осталось только посчитать все слова, разделить на 2 и добавить нужный код после N-го слова.

Неужели никто не знает как это сделать?

Alex1233 08.10.2014 00:18

PS: 123456 - это я

Alex1233 08.10.2014 00:22

Цитата:

Сообщение от danik.js
Открываешь консоль, вводишь там $('.invisible').remove() - и "защита" отключена ))

Кстати, вопрос не по теме, но раз уж затронули.. А как выполнить скрипт через адресную строку? Помню когда то давно видел такой код на JS - открываешь любой сайт, убираешь все из адресной строки, фигачишь туда этот код, жмешь интер и все картинки на страничке начинают летать.

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

Alex1233 08.10.2014 00:31

Вот как я это делал на PHP:

// вычисляем общую длину текста
$str = strlen( $row['short_story'] );

// получаем середину текста в количестве символов
$strpol = $str / 2;
			
// ищем первый конец предложения (. ) после середины текста
$startpost = strpos($row['short_story'], '. ', $strpol);

// возвращаем 2 символа
$startpost = $startpost + 2;
		
// генерируем первую часть текста		
$row['short_story1'] = substr($row['short_story'], 0, $startpost);

// генерируем вторую часть текста
$row['short_story2'] = substr($row['short_story'], $startpost);
		
		
// создаем массив из вставок
$insert = array("Взято с сайта ....", "Специально для ...", "Написано специально для ...", "Написано специально для сайта ...", "Взято с ...", "Рассказ написан специально для ...", "и т.д.");
		
$randins = array_rand($insert);
				
		
$thisurl = $_SERVER['REQUEST_URI'];

// выводим первую и вторую часть вставляя между ними свой текст
$tpl->set( '{short-story}', $row['short_story1'] . "<span style=\"width: 1px; height: 1px; display: block; opacity: 0; float: left;\"><a href=\"" . $thisurl . "\">" . $insert[$randins] . "</a></span> " . $row['short_story2'] );



Подскажите пожалуйста, как это переделать на JQUERY?

krasovsky 08.10.2014 09:57

Alex1233,
Есть такая чудесная вещь как консоль. В хроме и лисе вызывается через f12.Вот там можно и исходный код смотреть и запросы, и выполнять js код.

У тебя несколько вариантов:
1 Втыкать невидимую ссыль на сервере.

2 Написать функцию которая при загрузке страницы проверяет ее на наличие блоков текста с классом например ,needLink и вставлять туда невидимую ссыль
Вот пример http://jsfiddle.net/fygy8osw/1/
Как видишь там чистый текст, если в тексте есть html, придется что то придумывать, а то будет неприятно если вставиться как нибудь так <spa<a href="/path/">my link</a>n>my text</span>

3 Поискать решения на основе clipboard. Есть такие события как copy,past в которых доступен скопированный текст через e.clipboard помоему, не знаю точно не сталкивался. Не кроссбраузерная вещь, но тоже точно не знаю. Так вот так же как в прошлом примере, только на oncopy вставляем в середину теста из clipboard.

voral 08.10.2014 17:03

ну так преобразуйте строку в массив, разделяя по пробельным символам. От длинны посчитайте середину. Возьмите два соседних слова около серединой. И, далее, замените комбинацию этих слов, на комбинацию но со спаном внутри.

Alex1233 08.10.2014 21:51

krasovsky, во, спасибо за ссылочку - вроде то что нужно! Посмотрю потом повнимательнее.

voral, это то понятно, я просто не знаю как это сделать на JQUERY...

voral 09.10.2014 00:16

Как добраться до элемента содержащего текст знаете?
<!DOCTYPE HTML>
<html>
  <head>
  	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
  </head>
  <body>
    <div class="text-body">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.<br> Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum</div>
    <a id="test" href="#">Делим</a>

    <script>
      var insertLink = function(srcText)
      {
        // берем блок содержащий текст
        var textBox = $('.text-body');
        // берем из блока html (не забываем про br) и сразу делим полученное в массив.
        // в качестве разделителя пробел
        // но! это если реально не может быть вложенных тегов. Иначе нужно будет использовать
        // регулярные выражения
        var arrWords = textBox.html().split(' '); // берем из н
        // вставляем в серидину массива нужный код
        arrWords.splice(Math.ceil(arrWords.length / 2), 0, '<a href="http://ya.ru/" class="some-class">YES!!!</a>');
        // склеиваем массив в одну строку и заменяем на это значение html содержащийся в искомом блоке
        textBox.html(arrWords.join(' '));
      }
      $(document).ready(function(){
        // это только для очевилности. Можете вызвать эту ф-ию в нужный вам момент
        $('#test').click(insertLink);
      });
    </script>

  </body>
</html>


По сути тут и jQuery особо не нужен.


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