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

Question

我有一堆以纯文本形式返回的推文，我想对其进行浏览并根据正则表达式匹配分配适当的链接标签。

作为一个例子，这里有一条推文，我想要 @Bundlehunt成为<a href="http://twitter.com/bundlehunt">@Bundlehunt</a>和 http://bundlehunt.com应该变成<a href="http://bundlehunt.com">http://bundlehunt.com</a> .

推文示例:

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

听起来很简单，我想所以我使用了优秀的 http://www.gskinner.com/RegExr/工具来查找以下 2 个与我的推文中的内容相匹配的正则表达式模式:

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

现在回到我的 jQuery 文档，我试图浏览文本并匹配正则表达式，但这就是我迷失的地方......

我实际上如何去匹配纯文本、环绕 anchor 标记并将匹配的文本插入到正确的 anchor 标记中？

感谢您的阅读，

詹尼斯

Answer 1

如果您要在不受信任的输入上使用 jQuery 的 .html() 方法，您的 Web 应用程序将容易受到跨站点脚本 (XSS) 攻击，这种攻击可以通过发布恶意推文来利用。避免此安全问题的最佳方法是使用正确的 jQuery 函数单独附加推文的每个部分，这些函数使用 Web 浏览器的 DOM 函数来转义 HTML 字符串。

1. 首先，使用正则表达式交替( | 符号)将两个正则表达式合并为一个。就我的示例代码而言，Twitter 用户名正则表达式为 /@\w+/gi URL 正则表达式为 /(?:https?|ftp):\/\/.*?\..*?(?=\W?\s)/gi这些正则表达式与原始问题中的不一样；原始 URL 正则表达式似乎无法正常工作，我们不需要使用捕获组。因此，组合的正则表达式为 /@\w+|(?:https?|ftp):\/\/.*?\..*?(?=\W?\s)/gi .

2. 每次正则表达式匹配时，将匹配之前的文本安全地添加到容器中。要在 jQuery 中执行此操作，请创建一个空的“span”元素并使用 .text() 方法在其中插入文本。使用 $('text here') 会留下一个 XSS 漏洞。如果推文的内容是<script>alert(document.cookie)</script>怎么办？ ？

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

4. 格式化匹配并将其添加到容器中。再次强调，不要将不受信任的输入传递给 $ 或 jQuery 函数；使用 .attr() 方法添加 href 等属性，使用 .text() 方法添加链接文本。

5. 处理完所有匹配项后，添加推文的最后一个纯文本部分(该部分尚未在步骤 3 或 4 中添加)。

示例代码(也在 http://jsfiddle.net/6X6xD/3/ ):

var tweet = 'joined @BundleHunt for a chance to win the 2010 Mega Bundle! http://bundlehunt.com * Only 10 Days Left! URL containing an at sign: http://www.last.fm/event/1196311+Live+@+Public+Assembly. This should not work: <scr'+'ipt>alert(document.cookie)</scr'+'ipt>';

var combinedRegex = /@\w+|(?:https?|ftp):\/\/.*?\..*?(?=\W?\s)/gi,
    container = $('#tweet-container');

var result, prevLastIndex = 0;
combinedRegex.lastIndex = 0;
while((result = combinedRegex.exec(tweet))) {
    // Append the text coming before the matched entity
    container.append($('<span/>').text(tweet.slice(prevLastIndex, result.index)));
    if(result[0].slice(0, 1) == "@") {
        // Twitter username was matched
        container.append($('<a/>')
            // .slice(1) cuts off the first character (i.e. "@")
            .attr('href', 'http://twitter.com/' + encodeURIComponent(result[0].slice(1)))
            .text(result[0])
        );
    } else {
        // URL was matched
        container.append($('<a/>')
            .attr('href', result[0])
            .text(result[0])
        );
    }
    // prevLastIndex will point to the next plain text character to be added
    prevLastIndex = combinedRegex.lastIndex;
}
// Append last plain text part of tweet
container.append($('<span/>').text(tweet.slice(prevLastIndex)));

注意:此答案的旧版本确实建议使用 .html() 方法。因为如上所述，这是一个严重的安全问题，所以我使用编辑按钮发布我的新答案，从 View 中删除旧答案。