jquery - H1およびhrefタグ内の最初の単語にを配置する方法

Question

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でこれを行ったことがある人はいますか？

Answer 1

これはによって行うことができます

$(' your selecter').each(function(){
     var one = $(this);
     one.html(one.html().replace(/^(\w+)/, '<span>data</span>'));
});

Answer 2

lettering.jsをチェックし て、単語や文字をラップさせることができます。それは素晴らしいです。

Answer 3

その中の「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(' '));
            }
        }
    });

デモ

Answer 4

これを試すことができます。両方の例で機能します。

$('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);
});

このデモを確認してください