Javascript Bookmarklet, чтобы заменить текст ссылкой - PullRequest
Новая
       12

Javascript Bookmarklet, чтобы заменить текст ссылкой

2 голосов
/ 21 января 2012

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

Пример раньше: 

aaa bbb ccc ddd

Пример после: 

aaa <a href="http:www.whatever.com?bbb">bbb</a> ccc ddd

при условии, что мы искали "bbb"

Ответы [ 2 ]

8 голосов
/ 21 января 2012

Это решение будет сканировать DOM-поиск текстовых узлов в элементах документа, пропуская любые нужные элементы. Например, вы, вероятно, хотите пропустить теги , а также теги и другие. Таким образом, вы не будете заменять узлы элементов или основные функции страницы. 

(function(){
    // don't replace text within these tags
    var skipTags = { 'a': 1, 'style': 1, 'script': 1, 'iframe': 1 };

    // find text nodes to apply replFn to
    var findKW = function ( el, term, replFn ) {
        var child, tag;

        for (var i = el.childNodes.length - 1; i >= 0; i--) {
            child = el.childNodes[i];
            if (child.nodeType == 1) { // ELEMENT_NODE
                tag = child.nodeName.toLowerCase();
                if (!(tag in skipTags)) {
                    findKW(child, term, replFn);
                }
            } else if (child.nodeType == 3) { // TEXT_NODE
                replaceKW(child, term, replFn);
            }
        }
     };

    // replace terms in text according to replFn
    var replaceKW = function ( text, term, replFn ) {
        var match,
            matches = [];

        while (match = term.exec(text.data)) {
            matches.push(match);
        }
        for (var i = matches.length - 1; i >= 0; i--) {
            match = matches[i];

            // cut out the text node to replace
            text.splitText(match.index);
            text.nextSibling.splitText(match[1].length);
            text.parentNode.replaceChild(replFn(match[1]), text.nextSibling);
        }
    };

    var replTerm = prompt('Please enter term to replace');

    findKW(
        document.body, 

        // using \\b to only replace when the term is the whole word
        // e.g. if term is "bbb" then "aabbbccc" will not match
        new RegExp('\\b(' + replTerm + ')\\b', 'g'),

        // your replacement function, change URL accordingly
        function (match) {
          var link = document.createElement('a');
          link.href = 'http://google.com/#q=' + match;
          link.target = '_blank';
          link.innerHTML = match;
          return link;
        }
    );
}());

Здесь оно свернуто в виде букмарклета: 

javascript:(function(){var a={a:1,style:1,script:1,iframe:1};var b=function(d,e,f){var g,h;for(var i=d.childNodes.length-1;i>=0;i--){g=d.childNodes[i];if(g.nodeType==1){h=g.nodeName.toLowerCase();if(!(h in a)){b(g,e,f)}}else if(g.nodeType==3){c(g,e,f)}}};var c=function(a,b,c){var d,e=[];while(d=b.exec(a.data)){e.push(d)}for(var f=e.length-1;f>=0;f--){d=e[f];a.splitText(d.index);a.nextSibling.splitText(d[1].length);a.parentNode.replaceChild(c(d[1]),a.nextSibling)}};var d=prompt("Please enter term to replace");b(document.body,new RegExp("\\b("+d+")\\b","g"),function(a){var b=document.createElement("a");b.href="http://google.com/#q="+a;b.target="_blank";b.innerHTML=a;return b})})()

Скопируйте это в закладку и попробуйте на любой странице! Примечание: поиск чувствителен к регистру, но вы можете добавить флаг 'i' в RegExp, чтобы предотвратить это.

0 голосов
/ 21 января 2012

Самое простое регулярное выражение: 

document.body.innerHTML = document.body.innerHTML.replace(/bbb/ , '<a href="http://Google.com">bbb</a>');

Лучше: 

document.body.innerHTML = document.body.innerHTML.replace(/(bbb)/ , '<a href="http://Google.com">$1</a>');

Лучшее: 

var srch = "bbb";
var rg = new RegExp("("+srch+")");
document.body.innerHTML = document.body.innerHTML.replace(rg , '<a href="http://Google.com">$1</a>');

Скобки в регулярном выражении обозначают подходящую группу.«$ 1» во втором аргументе - это первая подобранная группа.

...