使用正则表达式和 Javascript 提取 URL 直到空格或 标记答案

【问题标题】：Extract URL until whitespace or tag using Regex with Javascript使用正则表达式和 Javascript 提取 URL 直到空格或 标记
【发布时间】：2022-01-25 06:05:12
【问题描述】：

我有一个类似的字符串：

Webcam recording https://www.example.com/?id=456&code=123

或喜欢：

Webcam recording https://www.example.com/?id=456&code=123<br><b>test<b>

从我使用的第一个示例中提取 URL：var reg_exUrl = /\bhttps?:\/\/[^ ]+/g;

现在我尝试扩展正则表达式，使其第一次匹配直到空格（行尾）或 标签。

这是我的尝试：

var reg_exUrl = /\b(https?:\/\/[^ ]+)(\<br\>)/g;

在https://regex101.com/r/gudNab/1 上看起来不错，并显示为两个不同的匹配项。

但是在 Javascript 中使用 Regex，  标记总是包含在链接中。

使用var matches = line.match(reg_exUrl); 给我matches[0]：

https://www.example.com/?id=456&code=123<br>

而不是所需的https://www.example.com/?id=456&code=123

【问题讨论】：

A br 也可以有自闭合斜线 。如果在浏览器中使用 dom prser 来提取文本很容易
您的评论与问题无关甚至是错误的，见stackoverflow.com/q/6079746/1066234
并非完全错误，您可能需要同时考虑两者。让dom解析器来做

标签： javascript regex

【解决方案1】：

您在使用 matches[0] 时获得完整匹配，但您有 2 个捕获组，其中没有   的部分位于捕获组 1 中。

如果您删除全局 /g 标志，则可以使用 match 获取该组值。

var line = "Webcam recording https://www.example.com/?id=456&code=123<br><b>test<b>\n";
var reg_exUrl = /\b(https?:\/\/[^ ]+)(\<br\>)/;
var matches = line.match(reg_exUrl);
console.log(matches[1]);

如果您希望两个示例都匹配，则可以使用不带非贪婪量词的模式，方法是使用匹配除< 之外的任何字符的否定字符类，并且仅在它不直接跟随br> 时才匹配它

模式匹配：

\bhttps?:\/\/
[^\s<]* 可选择匹配除空白字符或< 之外的任何字符
(?:非捕获组
- <(?!br>) 匹配 < 如果不直接跟在 br>
- [^\s<]* 可选择匹配除空白字符或< 之外的任何字符
)*关闭非捕获组并可选择重复

const regex = /\bhttps?:\/\/[^\s<]*(?:<(?!br>)[^\s<]*)*/;
[
  "Webcam-Aufnahme https://www.edumaps.de/file?id=959559110184937375.mp4&code=4yrn1ev<br><b>test<b><br>",
  "Webcam-Aufnahme https://www.edumaps.de/file?id=959559110184937375.mp4&code=4yrn1ev"
].forEach(s => {
  const m = s.match(regex);
  if (m) {
    console.log(m[0]);
  }
});

【讨论】：

【解决方案2】：

如果您想在  之前选择文本，您可以使用正向前瞻。 https?:\/\/.*?(?= )

添加 $ 和 \n 以提前结束输入：https?:\/\/.*?(?= |$|\n)

const regexp = /https?:\/\/.*?(?=<br>|$|\n)/;
const testString = "Webcam-Aufnahme https://www.edumaps.de/file?id=959559110184937375.mp4&code=4yrn1ev<br>**test**";

console.log(testString.match(regexp)[0])

见regex101

【讨论】：

非常感谢。我刚刚了解到?= 是积极的前瞻性。 ? 我现在正在使用var reg_exUrl = /\b(https?:\/\/[^ ]+)(?= )/g;
@Avatar 很棒，但请记住，如果字符串中有多个   实例，您的正则表达式将失败。使用惰性修饰符 ? 以便在第一个   之前停止：--- \b(https?:\/\/[^ ]+?)(?= )
可以使用$ -- \b(https?:\/\/[^ ]+?)(?= |$)
谢谢。我只是看到正则表达式不再匹配第一个字符串示例：很高兴在这里看到：regex101.com/r/yKin9E/1 - 我需要匹配两个示例。 – \b(https?:\/\/[^ ]+?)(?= |$) 现在可以使用了！ regex101.com/r/BzrkFa/1 – |$ 在做什么。是“或”吗？
是的，| 表示或，$ 表示字符串的结尾 ---  |$ 表示
或字符串的结尾