WedX - журнал о программировании и компьютерных науках

как сделать расширение для Chrome, которое превращает определенные слова в гиперссылки?

Я пытаюсь сделать расширение для Chrome, которое находит определенные слова на страницах и превращает их в гиперссылки. Так, например, если я захожу на веб-сайт, на котором где-то написано слово «поиск», то это слово превратится в ссылку, по которой я могу щелкнуть (оно по-прежнему будет отображаться как слово, но может быть другого цвета или что-то в этом роде) и быть перенаправлены на "www.google.com".

У меня есть код, который находит слова и изменяет их на другие слова, но я не знаю, как изменить их на гиперссылки. Вот JavaScript, который у меня есть:

walk(document.body);    
function walk(node)  
{       
    var child, next;    
    switch ( node.nodeType )  
    {
        case 1: 
        case 9:  
        case 11: 
            child = node.firstChild;
            while ( child ) 
            {
                next = child.nextSibling; 
                walk(child);
                child = next;
            }
            break;    
        case 3: 
            handleText(node);
            break;
    }
}

function handleText(textNode) 
{
    var v = textNode.nodeValue;    
    v = v.replace(/\bsearch\b/g, (str.link("https://www.google.com")));
    v = v.replace(/\bsearch\b/g, <a href="https://www.google.com">asdf</a>);

    textNode.nodeValue = v;
}

Может ли кто-нибудь помочь мне, пожалуйста?


Ответы:


1

HTML анализируется в DOM, что вы и просматриваете. На самом деле вы не заменяете DOM, а вместо этого заменяете текстовый узел неразобранным HTML, который не будет работать. Вместо этого вам нужно заменить текстовый узел на узел <a> с нужным URL-адресом и текстом.

08.11.2017
  • Спасибо за ответ! Я новичок в этом, как заменить текстовый узел узлом ‹a›? 08.11.2017

  • 2

    Вы должны заменить текстовый узел проанализированными элементами HTML.

    Изменять

        textNode.nodeValue = v;
    

    к чему-то вроде

        var htmlParser = document.createElement('div');
        htmlParser.innerHTML = v;
        // replace text node with parsed nodes
        var newNodes = htmlParser.childNodes;
        while (newNodes.length) {
          textNode.parentNode.insertBefore(newNodes[0], textNode);
        }
        textNode.parentNode.removeChild(textNode);
    

    Кроме того, обязательно игнорируйте якоря (node.tagName === 'A') при обходе DOM, иначе вы можете в конечном итоге заменить текст внутри существующих якорей.

    10.11.2017
    Новые материалы

    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..

    Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
    Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..

    Учебные заметки: создание моего первого пакета Node.js
    Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..

    Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!
    Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..

    ИИ в аэрокосмической отрасли
    Каждый полет – это шаг вперед к великой мечте. Чтобы это происходило в их собственном темпе, необходима команда астронавтов для погони за космосом и команда технического обслуживания..


    Для любых предложений по сайту: [email protected]