3

我正在尝试在 H1 标签中的第一个单词周围插入一个跨度。

不幸的是，标签也可以是链接，并且可以包含类等，例如：

  1. 来源 =<h1>This is a test</h1>

    输出 =<h1><span>This</span> is a test</h1>

  2. 来源 =<h1 class="blah blah"><a href="#">This is a test<a/></h1>

    输出 =<h1 class="blah blah"><a href="#"><span>This</span> is a test<a/></h1>

有没有人在说jQuery之前做过这个？

4

4 回答 4

1

这可以通过

$(' your selecter').each(function(){
     var one = $(this);
     one.html(one.html().replace(/^(\w+)/, '<span>data</span>'));
});
于 2012-09-13T10:42:59.983 回答
0

你可以试试这个，它适用于这两个例子。

$('h1').each(function(){
     var self = $(this);
     var p = self.text().split(' ');
     var html = self.html().replace(p[0], '<span>'+ p[0] +'</span>');
     self.html(html);
});

检查这个演示

于 2012-09-13T10:54:19.410 回答
0

适用于其中的“a”标签和纯文本。

$('h1').each(function(){
        if($(this).find('a').length>0)
        {
            var text = $(this).find('a').html();
            text = text.split(' ');
            if(text.length>0)
            {
                text[0] = '<span>' + text[0] + '</span>';
                $(this).find('a').html(text.join(' '));
            }
        }
        else
        {
            var text = $(this).html();
            text = text.split(' ');
            if(text.length>0)
            {
                text[0] = '<span>' + text[0] + '</span>';
                $(this).html(text.join(' '));
            }
        }
    });

演示

于 2012-09-13T10:44:20.210 回答
0

查看lettering.js 你可以让它包裹单词和字母。这很棒。

于 2012-09-13T10:42:01.533 回答