Question

我正在构建一个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 ？
我想只替换找到的电子邮件字符串，仅此而已...... 我真的很感激任何帮助。

Answer 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

Answer 2

对@NikhilNanjappa的原始答案稍作更新：我的版本效率较低，但会保留实际的电子邮件地址并添加div，并根据原始答案附加span和closing标签。

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;

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

2 个答案: