JSFiddle - React, Tailwind, and code Playground

HTML

<div class="twitter-icon">
    <a href="http://twitter.com/share?text=何かしらのタイトル&amp;url=http://あいうえお.jp/blog/何かしらのタイトル" class="twitter-btn-icon-link" target="blank" rel="nofollow">
        <span class="social-icon icon-twitter"></span>
        <span class="social-count twitter-count">
            <i class="fa fa-spinner fa-spin"></i>
        </span>
    </a>
</div>

<div class="test"></div>
<hr>
    <div class="test2"></div>

CSS

hr {
    margin: 1em 0;
}

.test2 {
    margin: 1em 0 0 0;
    color: #f00;
}

JavaScript

$(function(){
    var originalUrl = "http://あいうえお.jp/test/test.php";
    var punicord = "xn--l8jegik.jp";
    
    var convert = originalUrl.replace(/あいうえお.jp/g,punicord);
    
    $(".test").html(originalUrl + "<br>");
    $(".test").append(convert);
    
    //ここから追記
    var originalUrl2 = $(".twitter-icon a").attr("href");
    //punicodeは上記のものを流用します
    
    var convert2 = originalUrl2.replace(/あいうえお.jp/g,punicord);
    
    $("hr").after(originalUrl2 + "<br>");
    $(".test2").append(convert2);
    
});