jQuery 取代“小型大写字母” - 内容在

之间复制 HTML标签

发布于 2024-10-06 05:52:13 字数 831 浏览 0 评论 0原文

我发现 jQuery 的这个热门位实际上允许您复制“font-variant:小型大写字母”。通常这不是问题,但我使用的是 @font-face,但我几乎不知道它在 Chrome、Safari、IE 中与 font-variant-small-caps 配合得不好。长话短说,代码运行良好,但它有一个缺点 - 由于某种原因,它正在搜索括号中的第一个文本字符串,然后在后面的

示例中重复该文本字符串...代码说:

<h3 class="small caps">I'm the FIRST heading</h3>
<h3 class="small caps">I'm SECOND</h3>

被更改脚本来生成此内容:

<h3 class="small caps">I'm the FIRST heading</h3>
<h3 class="small caps">I'm the FIRST heading</h3>

这是在 jQuery 中发挥作用的代码:

    jQuery(document).ready(function($) {
        var text = $('h3.small-caps').html();
        $('h3.small-caps').html(text.replace(/\b([A-Za-z0-9])/g,'<span class="caps">$1</span>'));
        $('.caps').css('font-size',50);
    }); 

I found this HOT bit of jQuery that actually allows you to replicate "font-variant: small caps". Normally not an issue, but I'm using @font-face and little did I know that it doesn't play nicely with font-variant-small-caps in Chrome, Safari, IE. Long story short, the code is working SWEET but it has one drawback - for some reason it is searching for the first text string that is bracketed by and then that text string is repeated in later

example... code says:

<h3 class="small caps">I'm the FIRST heading</h3>
<h3 class="small caps">I'm SECOND</h3>

is altered by the script to produce this:

<h3 class="small caps">I'm the FIRST heading</h3>
<h3 class="small caps">I'm the FIRST heading</h3>

Here's the code that's doing the magic in jQuery:

    jQuery(document).ready(function($) {
        var text = $('h3.small-caps').html();
        $('h3.small-caps').html(text.replace(/\b([A-Za-z0-9])/g,'<span class="caps">$1</span>'));
        $('.caps').css('font-size',50);
    }); 

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

星星的轨迹 2024-10-13 05:52:13

尝试:

jQuery(document).ready(function($) {
    $('h3.small-caps').each(function() {
        var $this = $(this);
        var text = $this.html();
        $this.html(text.replace(/\b([A-Za-z0-9])/g,'<span class="caps">$1</span>'));
    });
    $('.caps').css('font-size',50);
}); 

Try:

jQuery(document).ready(function($) {
    $('h3.small-caps').each(function() {
        var $this = $(this);
        var text = $this.html();
        $this.html(text.replace(/\b([A-Za-z0-9])/g,'<span class="caps">$1</span>'));
    });
    $('.caps').css('font-size',50);
}); 
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文