实现 codepen 链接自动转换

创建
阅读 67

核心代码

function replaceCodepen(html) {
  // 原链接
  // let codepenRe = /https:\/\/codepen.io\/(\w+)\/pen\/(\S{6})/g;
  const codepenRe = /<p><a href=\"https:\/\/codepen.io\/(\w+)\/pen\/(\S{6,7})\">https:\/\/codepen.io\/\w+\/pen\/\S{6,7}<\/a><\/p>/g;

  function codepenCode(re, user, slug) {
    return `<iframe height="365" style="width: 100%;" scrolling="no" title="${slug}"
    src="https://codepen.io/${user}/embed/${slug}?height=365&theme-id=light&default-tab=js,result"
    frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
    See the Pen <a href='https://codepen.io/${user}/pen/${slug}'>${slug}</a> by ${user}
    (<a href='https://codepen.io/${user}'>@${user}</a>) on <a href='https://codepen.io'>CodePen</a>.
    </iframe>
  `;
  }

  const result = html.replace(
    codepenRe,
    codepenCode,
  );
  return result;
}

本文链接 https://www.yidiankuaile.com/post/auto-convert-codepen-links