正则是在锚标签中提取内部链接并将某些内容附加到其中



我使用nuxt.js开发了一个服务器端渲染博客,我想添加此站点的AMP版本。如果常规页面的URL为https://example.com/blog/internal-link,则AMP版本将为https://example.com/amp/blog/internal-link

我应该在所有内部链接发送给客户端之前将/amp的前缀附加给客户,如果有人打开AMP版本。

我已经有这个正则 <a([^>]*?)hrefs*=s*(['"])([^2]*?)21*>来提取锚标签的HREF值。

然后我想出了这个脚本:

const regex = /<a([^>]*?)hrefs*=s*(['"])([^2]*?)21*>/gi;
const str = `<a href="/blog/internal-link" aria-label="Internal Link" class="blog__link">`;
const subst = `<a href="/amp$3>`;
const result = str.replace(regex, subst);
console.log(result);

,但上面提取所有HREF值,包括外部和内部链接。我如何使正则链条仅与内部链接匹配,假设内部链接总是像 /blog/internal-link

因此,基于这种情况,输入和预期输出应该是这样的:

输入:<a href="/blog/internal-link" aria-label="Internal Link" class="blog__link">

输出:<a href="/amp/blog/internal-link" aria-label="Internal Link" class="blog__link">

输入:<a href="https://example.com/blog/internal-link" aria-label="Internal Link" class="blog__link">

输出:<a href="https://example.com/blog/internal-link" aria-label="Internal Link" class="blog__link">


update

感谢您帮助我解决这个问题。我最终使用了这个正则 <a([^>]*?)hrefs*=s*(['"])(/[^2]*?)21*>。我只需要在[^2]*?之前添加/即可过滤内部链接。

这是我问题的最终结果的最低繁殖:

const html = `
<html>
    <head>
        <title>Hello World</title>
    </head>
    <body>
        <a href="/blog/internal-link" aria-label="Internal Link" class="blog__link">Internal Link</a>
        <a href="https://example.com/blog/external-link" aria-label="External Link" class="blog__link">External Link</a>
    </body>
</html>`
const regex = /<a([^>]*?)hrefs*=s*(['"])(/[^2]*?)21*>/gi;
const result = html.replace(regex, `<a href="/amp$3">`);
console.log(result)

您可以通过确保/blog/internal-link是正则是您的正则一部分来解决此问题:

const regex = /<a([^>]*?)hrefs*=s*(['"])([sS]*)/blog/([sS]*)([^2]*?)21*>/gi;
const str = `<a href="https://example.com/blog/internal-link" aria-label="Internal Link" class="blog__link">`;
const subst = `<a href="$3/blog/amp/$4>`;
const result = str.replace(regex, subst);
console.log(result);

您可以使用URL类:

const href = str.match(/<a([^>]*?)hrefs*=s*(['"])([^2]*?)21*>/gi)[0]
const url = new URL(href, "http://example.com")
url.pathname = "/amp"+url.pathname
const newUrl = url.toString()

最新更新