自定义共享图标 - 获取 url、编码 uri 和替换

Posted 2023-02-24

【中文标题】自定义共享图标 - 获取 url、编码 uri 和替换

【英文标题】：Custom sharing icons - get url, encode uri & replace

【发布时间】：2015-01-26 15:03:08

【问题描述】：

我在网站的每个页面上都有 4 个图标来分享您所在的页面。我想获取您所在页面的 URL，对其进行编码，然后将其插入每个按钮的 href 属性中。

var url = window.location.href;
var encodedUrl = encodeURIComponent(url);
var urlRegEx = new RegExp(encodedUrl,'g');

$(".social").each(function () 
    $(this).html(this.html().replace('sharethisurl',urlRegEx));
);

<div id="share">
    <a class="social" href="http://pinterest.com/pin/create/button/?url=sharethisurl&media=sharethisjpg&description=" target="_blank"><img src="images/pinterest.png"  /></a>
    <a class="social" href="http://www.houzz.com/imageClipperUpload?link=sharethisurl&source=button&hzid=28938&imageUrl=sharethisjpg" target="_blank"><img src="images/houzz.png"  /></a>
    <a class="social" href="https://www.facebook.com/sharer/sharer.php?u=sharethisurl" target="_blank"><img src="images/facebook.png"  /></a>
    <a class="social" href="https://twitter.com/share?url=sharethisurl" target="_blank"><img src="images/twitter.png"  /></a>
</div>

【问题讨论】：

.html() 是元素标签之间的。您只想更新 href 属性。只需在each() 中使用this.href

我尝试用 $(this).href.replace('sharethisurl',urlRegEx); 替换仍然没有爱:(

我看到你有它的工作，但这个方法需要this.href = this.href.replace('sharethisurl',urlRegEx) href 是锚元素的字符串属性，即this（不要与$(this)混淆）

噢噢噢噢！好的，现在说得通了！谢谢！

【参考方案1】：

你需要的是

var url = window.location.href,
    encodedUrl = encodeURIComponent(url);

$(".social").prop('href', function(index, current)
    return current.replace(/sharethisurl/g, encodedUrl);
);

---

代码中的一些问题

使用replace 方法时，正则表达式用作查找模式（所以它应该是第一个参数） html() 返回元素的 html 内容（它不会返回匹配的实际标签，只返回其子节点）

【讨论】：

Sexxxy.... 完美。我永远不会想到这一切 :) 谢谢！！！！