Лучшая жизнь через букмарклеты

Развернуть сокращение HTML:
—
javascript:(function() { var tas = document.getElementsByTagName('textarea'); for (var i = 0; i < tas.length; i++) { var ta = tas[i]; var text = ta.value.replace(/(rn|r|n)/g, 'n'); var paras = text.split(/n{2,}/); for (var i = 0; i < paras.length; i++) { if (/^* /.test(paras[i])) { var lines = paras[i].split('n'); for (var j = 0; j < lines.length; j++) { lines[j] = ' <li>' + lines[j].replace(/^* /, '') + '</li>'; } paras[i] = '<ul>n' + lines.join('n') + 'n</ul>'; } if (/^= /.test(paras[i])) { paras[i] = '<h4>' + paras[i].replace(/^= /, '') + '</h4>'; } if (!/^<(p|ul|li|h4)>/.test(paras[i])) { paras[i] = '<p>' + paras[i]; } if (!/</(p|ul|li|h4)>$/.test(paras[i])) { paras[i] += '</p>'; } } ta.value = paras.join('nn'); } })();
—

Разверните HTML сокращение IE:
—
javascript:(function(){var tas=document.getElementsByTagName('textarea'),ta,t,ps,i,l,j;for(i=0;i<tas.length;i++){ta=tas[i];  
t=ta.value.replace(/(rn|r|n)/g,'n');ps=t.split(/n{2,}/);for(i=0;i<ps.length;i++){if(/^* /.test(ps[i])){l=ps[i].split('n');for(j=0;j<l.length;j++){l[j]=' <li>'+l[j].replace(/^* /,'')+'</li>';}ps[i]='<ul>n'+l.join('n')+'n</ul>';}if(!/^<(p|ul|li|h4)>/.test(ps[i])){ps[i]='  
<p>'+ps[i];}if(!/</(p|ul|li|h4)>$/.test(ps[i])){ps[i]+='</p>';}}ta.value=ps.join('nn');}})();
—

Нерасширенный источник (до удаления пробелов) выглядит так:

 javascript:(function() {  

    var tas = document.getElementsByTagName('textarea');  

    for (var i = 0; i < tas.length; i++) {  

        var ta = tas[i];  

        var text = ta.value.replace(/(rn|r|n)/g, 'n');  

        var paras = text.split(/n{2,}/);  

        for (var i = 0; i < paras.length; i++) {  

            if (/^* /.test(paras[i])) {  

                var lines = paras[i].split('n');  

                for (var j = 0; j < lines.length; j++) {  

                    lines[j] = '  <li>' + lines[j].replace(/^* /, '') + '</li>';  

                }  

                paras[i] = '<ul>n' + lines.join('n') + 'n</ul>';  

            }  

            if (/^= /.test(paras[i])) {  

                paras[i] = '<h4>' + paras[i].replace(/^= /, '') + '</h4>';  

            }  

            if (!/^<(p|ul|li|h4)>/.test(paras[i])) {  

                paras[i] = '<p>' + paras[i];  

            }  

            if (!/</(p|ul|li|h4)>$/.test(paras[i])) {  

                paras[i] += '</p>';  

            }  

        }  

        ta.value = paras.join('nn');  

    }  

})();

Инструменты для создания букмарклетов

Вы можете создавать букмарклеты только с помощью текстового редактора или, если вы действительно уверены, вы можете ввести их прямо в поле «Новая закладка» вашего браузера. Однако для чего-то более сложного, чем простой навигационный букмарклет, имеет смысл воспользоваться специальными инструментами.

Если вы используете Firefox, у вас уже есть доступ к некоторым полезным средствам для создания букмарклетов. Консоль JavaScript в Firefox — это бесценный инструмент отладки, а инспектор DOM — отличное средство для изучения дерева DOM страницы при написании букмарклетов, которые изменяют содержимое страницы. Букмарклет оболочки Джесси Рудермана для Firefox и Mozilla предоставляет интерактивную подсказку JavaScript, присоединенную к контексту текущей страницы, и является отличным способом опробовать новые методы, прежде чем передать их в текстовый редактор.

Хотя букмарклеты не могут содержать разрывы строк, важно, чтобы ваш исходный код оставался с отступом, когда вы пишете что-то большее, чем горстка операторов. Мой букмарклет удаления разрывов строк (ниже) — это инструмент, который удаляет вкладки, новые строки и несколько пробелов из блока JavaScript. Во многих случаях это все, что вам нужно сделать, чтобы создать букмарклет из простого блока кода, хотя вы должны помнить, чтобы завершить каждую строку точкой с запятой, прежде чем конвертировать ее. Букмарклет также является примером HTML-страницы, встроенной в закладку.

Удалить разрывы строк:
—
javascript:'<textarea rows=%2220%22 cols=%2260%22 id=%22ta%22></textarea><br><a href=%22http://%22 onclick=%22ta=document.getElementById('ta'); ta.value = ta.value.replace(/\n|\t/g, ' ').replace(/ +/g, ' '); return false;%22>Replace newlines and tabs</a>';
—

Переменная область избегания

Потенциальная проблема, создаваемая букмарклетами, связана с коллизиями пространства имен: что если ваш букмарклет использует или переопределяет переменную, которая уже используется другими скриптами на странице? Одним из способов избежать этого является использование случайных имен переменных, которые вряд ли уже используются, но это может затруднить чтение кода букмарклета и добавить ненужную длину к букмарклету. Лучшее решение — создать букмарклет как анонимную функцию со своей переменной областью действия. Вот как это работает:

 javascript:(function() {  

  /* Bookmarklet code here - declare variables with 'var' before use */  

})();

Функция function () { } Оборачивая функцию в круглых скобках и добавляя () Пока переменные в теле анонимной функции объявляются с использованием ключевого слова ‘var’, они будут ограничены областью действия функции и не будут мешать переменным с тем же именем в остальной части документа.

Благодаря функциональной природе JavaScript вы можете даже объявить другие функции внутри анонимной функции, не добавляя их в глобальную область документа.

Добавление более длинных скриптов

Ранее я упоминал, что существует способ обойти ограничение Internet Explorer на длину закладок. Этот метод также позволяет писать букмарклеты в стандартном JavaScript-коде с отступом, не сохраняя весь скрипт в одной строке, что делает его полезным методом для более сложных букмарклетов, реализованных для любого браузера. Хитрость заключается в размещении фактической реализации букмарклета в виде внешнего файла .js на веб-сервере. В этом случае букмарклет просто должен содержать код-заглушку, который загружается в оставшуюся часть скрипта — задача, которая легко достигается в пределах 508 символов.

Вот код загрузочного заглушки с отступом для удобства чтения:

 javascript:(function() {  

  var s = document.createElement('script');  

  s.setAttribute('src', 'http://url-of-main-bookmarklet-script');  

  s.setAttribute('type', 'text/javascript');  

  document.getElementsByTagName('head')[0].appendChild(s);  

})();

С удаленными пробелами приведенный выше код (за исключением URL-адреса внешнего скрипта) содержит 193 символа.

Этот код имеет один недостаток: он не работает с IE5 для Macintosh. Если для вашего букмарклета важна поддержка IE5 Mac, у liorean есть расширенная версия загрузочной заглушки, которая использует обнаружение браузера для обслуживания этого браузера.

Дальнейшее чтение

Лучший способ узнать о букмарклетах — взглянуть на написанные другими:

• www.bookmarklets.com
• www.favelets.com
• www.squarefree.com/bookmarklets/

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