如何选择特定的字符串和一些与jQuery？

我正在创建一个Chrome扩展程序，该扩展程序将扫描寻找具有特定域的电子邮件地址的网页。在这个例子中，我们将使用@ xyz.com作为域。如何选择特定的字符串和一些与jQuery？

在我的内容脚本script.js和硬编码HMTL页index.html我有以下几点：

$(document).ready(function() { 
 

 

 
    $('body:contains("@xyz.com")').css("text-decoration", "underline"); 
 

 
});

.container { 
 
    margin: 0 auto; 
 
    display: block; 
 
    padding: 10px 10px; 
 
    text-align: center; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="https://code.jquery.com/jquery-3.0.0-alpha1.js"></script> 
 
    <meta charset="utf-8"> 
 
    <title>my page</title> 
 
</head> 
 

 
<body> 
 

 
    <div class="container"> 
 
    <h1>Welcome!</h1> 
 
    <br> 
 
    <div class="text-container"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, tenetur natus doloremque laborum quos iste ipsum rerum obcaecati impedit odit illo dolorum ab tempora nihil dicta earum fugiat. Temporibus, voluptatibus. Lorem ipsum [email protected] 
 
     , consectetur adipisicing elit. Eos, doloribus, dolorem iusto blanditiis unde eius illum consequuntur neque dicta incidunt ullam ea hic porro optio ratione repellat perspiciatis. Enim, iure! Lorem ipsum dolor sit amet, consectetur adipisicing 
 
     elit. Error, nostrum, aliquid, animi, ut quas placeat totam sunt tempora commodi nihil ullam alias modi dicta saepe minima ab quo voluptatem obcaecati? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, dolor quis. Sunt, ut, explicabo, 
 
     aliquam [email protected] tempore quidem voluptates cupiditate voluptas illo saepe quaerat numquam recusandae? Qui, necessitatibus, est!</p> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

我想只选择了电子邮件地址，但是这显然行不通因为它选择了一切。

如何选择与我的关键字（域）匹配的文本，然后在其左侧进一步选择字符以捕获名称，直至遇到空格或电子邮件地址无法使用的非法字符？

这是有问题的，因为此扩展程序将运行在不同的页面上，所以不可能知道哪些元素文本将被嵌套以获得100％的成功率。

来源

2015-09-26 ProEvilz

平原在你的例子中的文本电子邮件是其他纯文本的一部分，并没有一个单独的节点，可以是“se lected”。相反，您必须创建一个新节点并将其插入到电子邮件文本的位置。这通常被称为“链接”（请参阅[一些答案]（http://stackoverflow.com/search?q=%5Bjavascript%5D+linkify+email）），我相信在stackoverflow上必须有一个确切的副本。 .. – wOxxOm

正则表达式首先令人困惑，但它是这样的最佳选择。这里是正则表达式我使用的检测电子邮件

[\w|._%+-]*@xyz.com

要打破它，“\ W”匹配任何单词字符。 “|”意思是“或”和“._％+ - ”是可以在电子邮件中使用的其他字符。括号后的“*”表示与括号内容相匹配的任意数量的字符。剩下的就是它的样子。

正则表达式代码是通过在代码前后加上“/”来指定的，最后的“g”表示它匹配多个值。

你可以找到更多关于替换命令如何工作here。

请参阅使用下面的代码工作的例子：

var emailPattern = new RegExp(/[\w|._%+-]*@xyz.com/g); 
 
var el = document.getElementsByTagName("p")[0]; 
 
el.innerHTML = el.innerHTML.replace(emailPattern, "<u>$&</u>");

.container { 
 
    margin: 0 auto; 
 
    display: block; 
 
    padding: 10px 10px; 
 
    text-align: center; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="https://code.jquery.com/jquery-3.0.0-alpha1.js"></script> 
 
    <meta charset="utf-8"> 
 
    <title>my page</title> 
 
</head> 
 

 
<body> 
 

 
    <div class="container"> 
 
    <h1>Welcome!</h1> 
 
    <br> 
 
    <div class="text-container"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, tenetur natus doloremque laborum quos iste ipsum rerum obcaecati impedit odit illo dolorum ab tempora nihil dicta earum fugiat. Temporibus, voluptatibus. Lorem ipsum [email protected] 
 
     , consectetur adipisicing elit. Eos, doloribus, dolorem iusto blanditiis unde eius illum consequuntur neque dicta incidunt ullam ea hic porro optio ratione repellat perspiciatis. Enim, iure! Lorem ipsum dolor sit amet, consectetur adipisicing 
 
     elit. Error, nostrum, aliquid, animi, ut quas placeat totam sunt tempora commodi nihil ullam alias modi dicta saepe minima ab quo voluptatem obcaecati? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, dolor quis. Sunt, ut, explicabo, 
 
     aliquam [email protected] tempore quidem voluptates cupiditate voluptas illo saepe quaerat numquam recusandae? Qui, necessitatibus, est!</p> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

如果你需要搭配其他域的电子邮件，您可以使用此正则表达式来代替：

[\w|.%+-]*@\w*.[\w|.%+-]*\b

来源

2015-10-04 03:13:07

如何选择特定的字符串和一些与jQuery？

回答

相关问题