jQuery：如何将文本与正则表达式模式匹配，并将结果包装在锚定标记中？

我有一堆以纯文本形式返回的tweet，我希望通过这些tweet并根据正则表达式匹配为其分配适当的链接标记

这里举一个例子，我希望

@Bundlehunt

变成

和

http://bundlehunt.com

应该变成

示例推文：

joined @BundleHunt for a chance to win the 2010 Mega Bundle! 
http://bundlehunt.com * Only 10 Days Left!

听起来很简单，我想，所以我使用这个优秀的工具找到了以下2个正则表达式模式，它们与我推文中的内容相匹配：

@twittername = /@(\w.+?)(?=\s)/gi
@links = /http:\/\/(.*)\.([a-zA-Z\.]){2,3}/gi

现在回到我的jQuery文档中，我试图遍历文本并匹配正则表达式，但这就是我迷路的地方

我实际上如何匹配纯文本，环绕锚定标记并将匹配的文本插入正确的锚定标记中

谢谢你的阅读

---

Jannis

如果对不受信任的输入使用jQuery的.html（）方法，您的web应用程序将容易受到跨站点脚本（XSS）攻击，通过发布恶意推文可以利用该攻击。避免此安全问题的最佳方法是使用正确的jQuery函数将tweet的每个部分分别附加到HTML转义字符串中，该函数使用web浏览器的DOM函数

首先，使用regex交替（

|

symbol）将两个正则表达式组合成一个正则表达式。就我的示例代码而言，Twitter用户名regex是

/\w+/gi

，URL regex是

/（？：https？| ftp）：\/\/.*？（？=\w？\s）/gi

，这些正则表达式与原始问题中的不同；原始URL正则表达式似乎无法正常工作，我们不需要使用捕获组。因此，组合正则表达式是

/@\w+|（？：https？| ftp）：\/\/.*？…*（？=\w？\s）/gi

每次正则表达式匹配时，安全地将匹配前的文本添加到容器中。要在jQuery中执行此操作，请创建一个空的“span”元素，并使用.text（）方法在其中插入文本。使用$（'text here'）将使XSS孔完全打开。如果tweet的内容是

警报（document.cookie）

，该怎么办

检查匹配的第一个字符以确定其格式。Twitter用户名以“@”开头，但URL不能

格式化匹配项并将其添加到容器中。同样，不要将不可信的输入传递给$jQuery或jQuery函数；使用.attr（）方法添加href等属性，使用.text（）方法添加链接文本

处理完所有匹配项后，添加tweet的最后一个纯文本部分，这在步骤3或4中没有添加

示例代码（也位于）：

var tweet='加入@BundleHunt，希望有机会赢得2010年的超级捆绑！http://bundlehunt.com *只剩下10天了！包含at标志的URL：http://www.last.fm/event/1196311+Live+@+公共+程序集。这不应该起作用：警报（document.cookie）'；
var combinedRegex=/@\w+|（？：https？| ftp）：\/\/.*？…*（？=\w？\s）/gi，
容器=$（“#tweet容器”）；
var结果，prevLastIndex=0；
combinedRegex.lastIndex=0；
而（（result=combinedRegex.exec（tweet）））{
//追加匹配实体前面的文本
container.append（$（''）.text（tweet.slice（prevLastIndex，result.index））；
如果（结果[0]。切片（0，1）==“@”）{
//Twitter用户名匹配
container.append（$（''）
//.slice（1）切掉第一个字符（即“@”）
.attr（'href'，'http://twitter.com/“+encodeURIComponent（结果[0]。切片（1）））
.text（结果[0]）
);
}否则{
//URL已匹配
container.append（$（''）
.attr（'href'，结果[0]）
.text（结果[0]）
);
}
//prevLastIndex将指向要添加的下一个纯文本字符
prevLastIndex=combinedRegex.lastIndex；
}
//追加tweet的最后一个纯文本部分
container.append（$（''）.text（tweet.slice（prevLastIndex））；

---

注意：这个答案的旧版本确实建议使用.html（）方法。如上所述，这是一个严重的安全问题，因此我使用编辑按钮发布了我的新答案，将旧答案从视图中删除。

最简单的方法是使用

字符串
对象的
替换
方法：

var TWITTER_NAME =  /@(\w.+?)(?=\s)/gi , LINK = /http:\/\/(.*)\.([a-zA-Z\.]){2,3}/gi ;

var string = "joined @BundleHunt for a chance to win the 2010 Mega Bundle! \n http://bundlehunt.com * Only 10 Days Left!"

    string.replace(
        TWITTER_NAME,
        function(str,c1,c2) { 
            return "<a href=\"http://www.twitter.com/" + c1.toLowerCase() + ">" + str + "</a>" ;
        }
    ) ; 
    string.replace(LINK,"<a href=\"$&\">$&</a>") ;

var TWITTER\u NAME=/@（\w.+？）（？=\s）/gi，LINK=/http:\/\/（.*）\（[a-zA-Z\.]）{2,3}/gi；
var string=“加入@BundleHunt是为了有机会赢得2010年的超级捆绑！\nhttp://bundlehunt.com *只剩下10天了！”
string.replace(
推特的名字，
函数（str，c1，c2）{
返回“”；
}
) ; 
字符串。替换（链接“”）；

有关文档，请参见此处：


另一方面，如果字符串包含多个与正则表达式匹配的子字符串，则必须在循环中运行，因为在JavaScript中捕获组（即parens中的部分）的处理非常糟糕

var TWITTER_NAME =  /@(\w.+?)(?=\s)/gi , LINK = /http:\/\/(.*)\.([a-zA-Z\.]){2,3}/gi ;

var string = "joined @BundleHunt for a chance to win the 2010 Mega Bundle! \n http://bundlehunt.com * Only 10 Days Left!"

    string.replace(
        TWITTER_NAME,
        function(str,c1,c2) { 
            return "<a href=\"http://www.twitter.com/" + c1.toLowerCase() + ">" + str + "</a>" ;
        }
    ) ; 
    string.replace(LINK,"<a href=\"$&\">$&</a>") ;