js 匹配URL的正则表达式

• 待匹配的字符串

const str = `<div>
    <a href="https://www.baidu.com">百度</a>
    <a href="http://www.qq.com">QQ</a>
    <a href="https://www.sina.com">新浪</a>
    <div>
        <img src="https://www.sina.com/1.jpg" alt="">
        <img src="http://www.qq.com/2.png" alt="">
        <img src="https://www.sina.com/3.png" alt="">
    </div>
</div>`;

获取字符串中所有 a 标签的 href 的值及其中间的文本内容

const linkReg = /(<a.*href[\s]?=[\s]?['"](.*)['"].*?>(.*)<\/a>)/igm;
const linkArray = [];
str.replace(linkReg, (...args) => linkArray.push({ href: args[1], text: args[2] }));
console.log(linkArray);

输出结果:

[
    {
        "href": "https://www.baidu.com",
        "text": "百度"
    },
    {
        "href": "https://www.qq.com",
        "text": "QQ"
    },
    {
        "href": "https://www.sina.com",
        "text": "新浪"
    }
]

---

匹配所有的 img 标签的 src 的值

const imgArray = [];
const imgReg = /(<img.*src[\s]?=[\s]?['"](.*?)['"].*\/?>)/igm;
str.replace(imgReg, (...args) => imgArray.push(args[2]));

//  ---- 或者  ----
const imgArray2 = [];
let match = null;
do {
    match = imgReg.exec(str);
    match && imgArray2.push(match[2]);
} while (match);

//  两种方式的结果是一样的
console.log(imgArray);
console.log(imgArray2);

输出结果:

[
    "https://www.sina.com/1.jpg",
    "https://www.qq.com/2.png",
    "https://www.sina.com/3.png"
]

匹配出所有的字符串中所有的URL, 不区分html标签

const urlReg = /(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?/ig;
const urlArrray = str.match(urlReg);

输出结果:

[
    "https://www.baidu.com",
    "https://www.qq.com",
    "https://www.sina.com",
    "https://www.sina.com/1.jpg",
    "https://www.qq.com/2.png",
    "https://www.sina.com/3.png"
]