使用Regex提取Twitter状态URL，并使用Javascript转换为另一个字符串

Question

我想从帖子中的文本URL中提取Twitter状态URL，并使用该URL使用他们的API从Twitter获取嵌入代码。我在使用JavaScript和Regex提取URL时遇到了问题。

Regex会忽略单引号或双引号内的URL，因此不会在超链接中呈现代码。我需要将该URL转换为从Twitter API获得的嵌入HTML代码。

Javascript代码(这个问题的原始Regex代码，但修改为忽略以单引号或双引号开头的文本)：

var str = '<p>https://twitter.com/oppomobileindia/status/798397636780953600</p>';
var matched = str.match(/^[^'"]*http(s)?://twitter.com/(?:#!/)?(w+)/status(es)?/(d+)$/);
var url = matched[0];

<p>只是一个可以围绕URL的html文本示例，它可以是任何字符串，但如果URL在引号内，则应忽略它。

我有两个问题解决不了。

1) 在匹配的[0]中，我还得到了URL之前的字符。如何只获取URL？

2) 如何将源字符串中的URL替换为另一个任意文本(最终将是我从Twitter获得的小部件HTML代码)？

预期结果：

1) var url应为："https://twitter.com/oppomobileindia/status/798397636780953600"

2) var str应该是："<p>this is a a arbitrary text that replaced the original url</p>"(或任何其他文本)

Answer 1

要获得URL值，可以在URL模式周围添加捕获组：

/(^|[^'"])(https?://twitter.com/(?:#!/)?(w+)‌​/status(?:es)?/(d‌​+))/

并且访问捕获组#2的[2]。

Regex详细信息：

• (^|[^'"])-捕获组#1：字符串(^)的开头或除"和'之外的任何字符([^'"])
• (https?://twitter.com/(?:#!/)?(w+)‌​/status(?:es)?/(d‌​+))-捕获组2：
  • https?://twitter.com/-文字https://twitter.com/或http://twitter.com/文本
  • (?:#!/)?-#!/的可选(1或0出现)序列
  • (w+)‌-捕获组#3：一个或多个字母/数字或_
  • ​/status(?:es)?/-文字/status/或/statuses/文本
  • (d‌​+)-捕获组#4：一个或多个数字

要只替换URL，您只需要使用捕获组和backreferences来恢复您需要保留的捕获组中的文本：

var replaced = str.replace(/(^|[^'"])(https?://twitter.com/(?:#!/)?(w‌​+)/status(?:es)?/(‌​d+))/, '$1NEW_CODE');

参见JS演示：

var str = '<p>https://twitter.com/oppomobileindia/status/798397636780953600</p>';
var matched = str.match(/(^|[^'"])(https?://twitter.com/(?:#!/)?(w+)/status(?:es)?/(d+))/);
var url = matched[2];
console.log(url);
var res = str.replace(/(^|[^'"])(https?://twitter.com/(?:#!/)?(w+)/status(?:es)?/(d+))/, '$1NEW_CODE');
console.log(res);