如何在实时网页中用 mailto 链接替换电子邮件地址? [英] How to replace email addresses with mailto links in a live web page?

问题描述

想象一下:您遇到一个网页，上面写着只需向 [e-mail] 发送消息"，但要实际发送电子邮件，您需要突出显示地址，然后将其剪切并粘贴到您选择的电子邮件客户端的新撰写窗口.

Imagine this: you come across a webpage that says "Just send a message to [e-mail]" 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.

显然，如果它只是一个 mailto: 链接，生活会更轻松，这样您就可以单击它并自动创建一条新消息.如何构建将电子邮件地址转换为可点击的 mailto: 链接的扩展程序?

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?

我原本想询问是否有一个扩展程序可以为未链接的 Twitter @username 提及启用类似的功能，但我认为这个电子邮件地址问题会更简单.

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.

推荐答案

使用 innerHTML 替换电子邮件 - 否，这会破坏页面的，尤其是因为删除了事件侦听器并且还替换了属性.

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

递归遍历所有节点:

• 逆序循环，防止修改DOM时发生冲突.
• 对于每个项目，检查它的nodeType 值.
  • 如果.nodeType === 1(元素)，再次调用该函数(递归).
  • 如果 .nodeType === 3(文本节点):
  • 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. 使用正则表达式和 exec 查找一个电子邮件地址的方法.使用结果的 .index 属性知道电子邮件地址的起始位置，使用 result[0].length 知道地址的长度.
    2. 使用节点的splitText 方法将文本节点分为三部分.
    3. 创建一个 元素.
    4. 将电子邮件的文本节点(前一个文本节点的第二个文本节点)附加到此锚点.它会自动从文档中删除.
    5. 在第三个节点之前插入此链接.
    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.

  不是 chrome 扩展，但它显示了 chrome 扩展的行为:http://jsfiddle.net/ckw89/

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

  (正则表达式基于 MongoEngine 的 EmailField 模式):

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

   // 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> [e-mail] for details
                   node = node.splitText(result.index);
  
                   // 2: Contact <SPLIT>[e-mail]<SPLIT> for details
                   node = node.splitText(result[0].length);
  
                   // [e-mail]
                   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);
               }
           }
       }
   }
  

  当用作内容脚本时，此脚本将立即工作，因为它唯一的交互与页面是 DOM.为了完整起见，这里是 manifest.json 文件的内容:

  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"]
      }]
  }
  

  业绩预告

  当前脚本替换活动文档中的所有节点.考虑将根节点(例如 )移动到 操作前的文档片段.

  这篇关于如何在实时网页中用 mailto 链接替换电子邮件地址?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！