Question

如何在h1标签的第一个单词上添加跨度选择，然后在jquery的第二个单词上添加不同的跨度选择？

例如，我想改变：

<h1>This is a title</h1>

到

<h1><span class="firstWord">This </span><span class="secondWord">is </span> a title</h1>

Answer 1

var words = $('h1').text().split(' '); // Note that split isn't jQuery, it's just javascript.

现在你有一个可以使用的单词数组，并且可以使用跨度等发出，例如：

words[0] = '<span class="firstWord">' + words[0] + '</span>';
var sentence = $('h1').text(words.split(' '));

Answer 2

我的版本：

var parts = $('h1').text().split(' ');
parts[0] = '<span class="firstWord">'+parts[0]+'</span>';
parts[1] = '<span class="secondWord">'+parts[1]+'</span>';
alert(parts.join(' '));

Answer 3

var splitted = $("h1").text().split(" ");

if(splitted.length > 0) {
    $("h1").html('').append("<span class='firstWord'>" + splitted[0] + "<span> ");
    if(splitted.length > 1) {
        $("h1").append("<span class='secondWord'>" + splitted[1] + "<span> ");
        for(var i=2;i<splitted.length;i++) {
            $("h1").append(splitted[i] + " ");
        }
    }
}

或查看jsFiddle

Answer 4

请参阅： http://jsfiddle.net/thirtydot/Jeuu3/

$('h1').html($('h1').html().replace(/^(\w+) (\w+)/, '<span class="firstWord">$1</span> <span class="secondWord">$2</span>'));

也就是说，最好使用更通用的内容，例如Lettering.js。

这很简单：

$('h1').lettering('words');

然后，您可以为.word1和.word2添加CSS。

请参阅： http://jsfiddle.net/thirtydot/Jeuu3/1/

Answer 5

警告：如果<h1>标记中没有HTML（这就是使用.text()获取初始值的原因），这只是安全的。我认为<h1>标记中的HTML确实不可能。

var $h1 = $('h1');
h1_words = $h1.text().split(' ');
if (h1_words.length >= 2) {
    h1_words[0] = '<span class="firstWord">'+h1_words[0]+'</span>';
    h1_words[1] = '<span class="secondWord">'+h1_words[1]+'</span>';
}
$h1.html(h1_words.join(' '));

Answer 6

var str = $('h1').text().trim()

var strArray = str.split(' ');

var temp;

for(var i=1;i<strArray.length;i++){
   temp += strArray[i]+" "
}

var result = '<span class='firstWord'>'+strArray[0]+'</span>'+" "+temp.trim()

$('h1').text(result)

使用jquery编辑的h1标签的第一个和第二个单词？

6 个答案: