Как заменить адреса электронной почты с ссылками Mailto на веб-странице Live? -- javascript поле с участием google-chrome-extension поле с участием firefox-addon пол Связанный проблема

How to replace email addresses with mailto links in a live web page?


1
vote

проблема

русский

Представьте себе это: вы столкнулись с веб-страницей, который говорит: «Просто отправьте сообщение user@example.com», но чтобы на самом деле отправить электронное письмо, вам нужно выделить адрес, а затем вырезать и вставить его в поле получателя Новое составное окно вашего почтового клиента выбора.

Очевидно, что жизнь будет легче, если бы это было просто почтой: ссылка, поэтому вы можете нажать на нее и иметь новое сообщение, созданное автоматически. Как создать расширение, которое включает адреса электронной почты в кликабельные mailto: ссылки?

Я изначально собирался спросить, было ли продление, чтобы включить аналогичную функциональность для несекновенного твиттера @username упоминает, но я думал, что эта проблема адреса электронной почты будет более простым ситуацией.

Английский оригинал

Imagine this: you come across a webpage that says "Just send a message to user@example.com" but to actually send the email, you need to highlight the address and then cut and paste it into the recipient field of a new compose window of your email client of choice.

Obviously life would be easier if it were simply a mailto: link, so you could click on it and have a new message created automatically. How do I build an extension that turns email addresses into clickable mailto: links?

I was originally going to ask if there was an extension to enable similar functionality for unlinked Twitter @username mentions but I thought this email address problem would be a simpler situation.

</div
        

Список ответов

5
 
vote
vote
Лучший ответ
 

Используйте <код> innerHTML , чтобы заменить электронную почту -. <Сильный> Нет , эта страница брейки, особенно потому, что слушатели событий удаляются и атрибуты также заменить < / р> <Р> Рекурсивный цикл по всем узлам:

    .
  • <сильный> Петля в обратном порядке , чтобы избежать конфликтов при изменении DOM.
  • Для каждого элемента, проверить его <код> nodeType значение.
      .
    • Если <код> .nodeType === 1 (элемент), вызовите функцию снова (рекурсия).
    • Если <код> .nodeType === 3 (текстовый узел):
      1. Используйте регулярное выражение и <код> exec способ найти один адрес электронной почты. Использование результата <код> .index свойство знать начальное положение адреса электронной почты, а также <код> result[0].length , чтобы узнать длину адреса.
      2. Использование узла <код> splitText метод вырезать текстовый узел из трех частей.
      3. Создание <код> <IfModule mod_rewrite.c> RewriteEngine on RewriteBase /examplesite/ RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ index.php/$1 [L] </IfModule> 0 элемент.
      4. Append текстовый узел сообщения электронной почты (в второй текстовый узел из предыдущего) на этот якорь. Он автоматически удаляется из документа.
      5. <Литий> Вставьте ссылку перед третьим узлом.

демонстрация

<Р> Не расширение хром, но он показывает, как расширение хром будет вести себя: http://jsfiddle.net/ckw89/

Chrome расширение

<Р> (регулярное выражение основано на MongoEngine-х <код> <IfModule mod_rewrite.c> RewriteEngine on RewriteBase /examplesite/ RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ index.php/$1 [L] </IfModule> 1 < / код> шаблон ):

<код> <IfModule mod_rewrite.c> RewriteEngine on RewriteBase /examplesite/ RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ index.php/$1 [L] </IfModule> 2

 <код> <IfModule mod_rewrite.c> RewriteEngine on RewriteBase /examplesite/ RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ index.php/$1 [L] </IfModule> 3  
<Р> Этот скрипт будет работать сразу же при использовании в качестве содержимого сценария , потому что его только взаимодействие со страницей является DOM. Для полноты картины, вот содержимое <код> <IfModule mod_rewrite.c> RewriteEngine on RewriteBase /examplesite/ RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ index.php/$1 [L] </IfModule> 4 файла: < / р>
 <код> <IfModule mod_rewrite.c> RewriteEngine on RewriteBase /examplesite/ RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ index.php/$1 [L] </IfModule> 5  

Производительность уведомления

<Р> Текущий сценарий заменяет все узлы в живом документе. Рассмотрим перемещение корневой узел (например, <код> <IfModule mod_rewrite.c> RewriteEngine on RewriteBase /examplesite/ RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ index.php/$1 [L] </IfModule> 6 ) в документа фрагмент , прежде чем манипулировать.

 

Use innerHTML to replace the email - No, this breaks page's, especially because event listeners are removed and attributes are also replaced.

Recursively loop through all nodes:

  • Loop in the reverse order, to prevent conflicts when you modify the DOM.
  • For each item, check it's nodeType value.
    • If .nodeType === 1 (element), call the function again (recursion).
    • If .nodeType === 3 (text node):
      1. Use a regular expression and the exec method to find one email address. Use the result's .index property to know the starting position of the email address, and result[0].length to know the length of the address.
      2. Use the node's splitText method cut the text node in three parts.
      3. Create an <a> element.
      4. Append the email's text node (the second text node from the previous) to this anchor. It's automatically removed from the document.
      5. Insert this link before the third node.

Demo

Not a chrome extension, but it shows how a chrome extension would behave: http://jsfiddle.net/ckw89/

Chrome extension

(the regexp is based on MongoEngine's EmailField pattern):

script.js

 // Initiate recursion  wrapLink(document.body);   function wrapLink(elem) { // elem must be an element node      var nodes = elem.childNodes        , i = nodes.length        , regexp = /([-!x23$%&'*+/=?^_`{}|~0-9A-Z]+(.[-!x23$%&'*+/=?^_`{}|~0-9A-Z]+)*|^"([x01-x08x0bx0cx0e-x1f!x23-\[\]-x7f]|\[x01-011x0bx0cx0e-x7f])*")@(?:[A-Z0-9](?:[A-Z0-9-]{0,61}[A-Z0-9])?.)+[A-Z]{2,6}/i        , node, emailNode, a, result;      while (node = nodes[--i]) {          if (node.nodeType === 1) {              // Skip anchor tags, nested anchors make no sense              if (node.nodeName.toUpperCase() !== 'A')                 wrapLink(node);          } else if (node.nodeType === 3) {              // 1: Please note that the regexp has NO global flag,              //    and that `node.textContent` shrinks when an address is found              while (result = regexp.exec(node.textContent)) {                  // 2: Contact <SPLIT> me@example.com for details                  node = node.splitText(result.index);                   // 2: Contact <SPLIT>me@example.com<SPLIT> for details                  node = node.splitText(result[0].length);                   // me@example.com                  emailNode = node.previousSibling                   // 3. Create link                  a = document.createElement('a');                  a.href = 'mailto:' + result[0];                   // 4: Append emailNode                  a.appendChild(emailNode);                   // 5: Insert before                  elem.insertBefore(a, node);              }          }      }  } 

This script will work immediately when used as a Content script, because its only interaction with the page is the DOM. For completeness, here's the contents of the manifest.json file:

{     "name": "Turns email addresses in `mailto:`s",     "version": "1",     "version_version": 2,     "content_scripts": [{         "matches": ["*://*/*"],         "js": ["script.js"]     }] } 

Performance notice

The current script replaces all nodes in the live document. Consider moving the root node (eg <body>) to a document fragment before manipulating.

</div
 
 
         
         

Связанный проблема

4  Является ли хорошей идеей использовать условные зависимости в модулях AMD?  ( Is it a good idea to use conditional dependencies in amd modules ) 
Я думаю об использовании условий для указания модуля зависит в модульной системе AMD. Например, чтобы загрузить библиотеку на браузере и библиотеку на сервере...

0  Отображать имя страницы в JavaScript?  ( Display page name in javascript ) 
Как бы я добавил <код> location.href.split('/').pop() к документу HTML для отображения имени страницы? (Не весь URL) я хотел бы отобразить только имя страниц...

0  JavaScript Foreach Array Ключевые значения, вывод в HTML  ( Javascript foreach array key values output to html ) 
Как сердите к клавишам ARRAY THRU, чтобы вывести свои значения в HTML? Расположение Я работаю, - это миниатюрная сетка, 3 колонны на 2 ряда. Каждый миниатюр...

0  Команда STEART BOBLE не работает, когда добавляю новый файл JS  ( Stencil bundle command is not working when i add new js file ) 
Я добавил несколько файлов JS в моей теме (Track-CLI), а когда я запускаю stencil bundle COMMENT, ошибки JS получили бросок. Я пробовал удаление <код> app...

0  Модель только показывает идентификатор в вложенной модели в парусах  ( Model only show id in nested model in sails ) 
Так что я разрабатываю приложение, используя парус JS. Я хочу отправить нить вместе с его комментариями как ответ. Вот моя модель thread.js <код> module...

0  .append () элемент с более чем одним классом  ( Append element with more than one class ) 
Я не могу найти информацию о том, можно ли использовать .append (), чтобы добавить элемент в HTML и дать этому элементу более одного класса <код> $( ".nav"...

0  Как закрыть всплывающее окно, когда видео YouTube играет на кнопке кнопки ESC?  ( How to close popup when youtube video is playing on esc button button ) 
Нажмите меня, чтобы увидеть демонстрацию Когда видео не играет, то кнопка ESC нажала всплывающее окно, но он не работает при воспроизведении видео. ...

0  Сортировка не работает в смарт-таблице угловой JS  ( Sorting is not working in smart table angular js ) 
Сортировка смарт-таблицы не работает по какой-то причине после использования в качестве пользовательской директивы. Можете ли вы помочь мне, что я сделал не т...

362  JavaScript Глобальный механизм событий  ( Javascript global event mechanism ) 
Я хотел бы поймать каждую неопределенную ошибку функции. Есть ли глобальная обработка ошибок в JavaScript? Чехол на использование ловит вызовы функций от Flas...

1  JavaScript не работает над динамическим контентом  ( Javascript not working on dynamic content ) 
У меня есть страница, где в HTML Div загружен с другой страницы. На родительской странице у меня есть JavaScript, который имеет элементы, которые применяются ...

0  Новое развитие приложений с использованием Cordova и Ionic  ( Native app development using cordova and ionic ) 
Как сохранить процесс или сервис всегда запущены даже после того, как приложение будет убито пользователем, похожее на секундомер, который будет запущен даже ...

59  Дисплей Div в положении курсора в Textarea [дубликат]  ( Display div at cursor position in textarea ) 
<в сторону CLASS = "S-NEWACTS S-WELTIVE__info JS-Post-New Imide MB16« Роль = «Статус»> Этот вопрос уже есть ответы здесь : ...

1  Столбец Tabulator с JSX - выполнение функций класса  ( Tabulator column with jsx executing class functions ) 
Я пытаюсь использовать React-Tabulator, но у меня проблемы с рендером функции внутри моих столбцов таблицы. Функция возвращает JSX, но она использует другие к...

0  Удалите подстроку из строки в jQuery [дублировать]  ( Remove a substring from a string in jquery ) 
<в сторону CLASS = "S-NEWACTS S-WELTIVE__info JS-Post-New Imide MB16« Роль = «Статус»> Этот вопрос уже есть ответы здесь : ...

0  Кнопка CKeditor 4 Не отображается  ( Ckeditor 4 underline button not showing ) 
Это мой код JavaScript для конфигурации моего CKEDITOR. Я нахожу на браузере для этого решения, но я не могу найти никакого решения даже на официальном сайте ...

Связанный проблема

4  Является ли хорошей идеей использовать условные зависимости в модулях AMD? 
0  Отображать имя страницы в JavaScript? 
0  JavaScript Foreach Array Ключевые значения, вывод в HTML 
0  Команда STEART BOBLE не работает, когда добавляю новый файл JS 
0  Модель только показывает идентификатор в вложенной модели в парусах 
0  .append () элемент с более чем одним классом 
0  Как закрыть всплывающее окно, когда видео YouTube играет на кнопке кнопки ESC? 
0  Сортировка не работает в смарт-таблице угловой JS 
362  JavaScript Глобальный механизм событий 
1  JavaScript не работает над динамическим контентом 
0  Новое развитие приложений с использованием Cordova и Ionic 
59  Дисплей Div в положении курсора в Textarea [дубликат] 
1  Столбец Tabulator с JSX - выполнение функций класса 
0  Удалите подстроку из строки в jQuery [дублировать] 
0  Кнопка CKeditor 4 Не отображается 



© 2021 www.qaru.top All Rights Reserved. Q&A House все права защищены


Licensed under cc by-sa 3.0 with attribution required.