如何解析 DOM 以获取电子邮件 Javascript答案

【问题标题】：How parse DOM to get emails Javascript如何解析 DOM 以获取电子邮件 Javascript
【发布时间】：2016-01-28 11:10:59
【问题描述】：

我正在构建一个 Chrome 扩展程序，它解析整个 DOM/HTML 并
用以下 div 替换任何找到的电子邮件（多封电子邮件）：

<div class="email_tmp"> found_email <span>SAVE EMAIL</span></div>

示例：

<body>
 <div>Some Text...</div>
 <div>text a@a.com text</div>
 <div>Some Text...</div>
 <p>More Text</p>
 <div><div><span>text b@b.com text</span></div></div>
 <span>Last text</span>
</body>

替换为：

<body>
 <div>Some Text...</div>
 <div>text <div class="email_tmp"> a@a.com <span>SAVE EMAIL</span></div> text</div>
 <div>Some Text...</div>
 <p>More Text</p>
 <div><div><span>text <div class="email_tmp"> b@b.com <span>SAVE EMAIL</span></div> text</span></div></div>
 <span>Last text</span>
</body>

如何用整个 div
搜索和替换找到的电子邮件，也用电子邮件替换字符串 found_email？
我只想替换找到的电子邮件字符串，仅此而已...
非常感谢任何帮助。

【问题讨论】：

你会将什么归类为找到的电子邮件？
对不起，我不明白你的问题。谢谢
每个带有“email_tmp”类的 div 上的文本是电子邮件吗？
您是否尝试使用 xpath 和 javascript 来查找您的 div ？ @Philip Enc
我更新了问题。我必须找到任何可能的电子邮件字符串。如果电子邮件被另一个 div 包裹，那并不重要。只有字符串很重要...

标签： javascript html dom google-chrome-extension html-parsing

【解决方案1】：

这里是您所寻找的整体解决方案

HTML

<div id="main">
    sdfsdsdfsdfsdf a@a.com sdfsdfsdfsdfsdfsdf
</div>

JavaScript

var page_content = document.getElementById('main').innerHTML;
var found_email = "<div class='email_tmp'> found_email <span>SAVE EMAIL</span></div>";

//gives an array of the emails
var email = page_content.match(/([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z0-9._-]+)/gi);

//replaces the emails to your desired content
var result = page_content.replace(email, found_email);

//replaces the changed HTML back to the 'main' div
document.getElementById('main').innerHTML = result;

Here is the Fiddle

更新：

如果您只想替换文本而不向 HTML 内容添加任何类或标签，那么为此编写一个普通脚本会变得非常复杂。在这种情况下，我强烈建议您使用this library，我发现它是您问题的完美解决方案。

它是一个名为findAndReplaceDOMText 的库，它使用内置方法来解决这个问题。您只需要像这样提供find（查找内容）和replace（替换HTML），

findAndReplaceDOMText(document.getElementById('t'), {
  find: /([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z0-9._-]+)/gi,
  replace: '<div class='email_tmp'> found_email <span>SAVE EMAIL</span></div>'
});

如果您在实现此库时遇到任何问题，您显然可以恢复。

这也是你必读的文章 - replacing-text-in-the-dom-solved

【讨论】：

可能这是最好的答案，但我不能用新的内容替换洞 div(main) 内容，因为我的 div(main) 是任何网站的主体，如linkedin，替换过程可能会影响一些附带的事件。但如果我只替换电子邮件，附加事件的可能性会更小。
@PhilipEnc - 如果是这种情况，我已经相应地更新了答案。请检查。希望对您有所帮助。

【解决方案2】：

@NikhilNanjappa 的原始答案略有更新：我的版本效率较低，但它会根据原始答案保留实际的电子邮件地址并预先添加 div 并附加跨度和结束标记。

var save_email_beg = "<div class='email_tmp'> ";
var save_email_end = " <span>SAVE EMAIL</span></div>";
var i = 0;
for (; i < email.length; i++) {
  var new_string = save_email_beg + email[i] + save_email_end;
  page_content = page_content.replace(email[i], new_string);
}
document.getElementById('main').innerHTML = page_content;

【讨论】：

这不是正确的答案，因为您的解决方案正在破坏并再次创建正文的所有内容（在我的情况下），这会阻止 Javascript 的所有当前事件侦听器。自己试试吧！
对，我看到了您对 @NikhilNanjappa 的第一个答案的评论，所以这不会总体上起作用，但我想提供包含最初要求的实际电子邮件地址的答案，以便那些在这个过程中没有被破坏。