Question

我已经看过很多关于如何获取元素的第一个单词并在其周围添加跨度的示例，为该元素提供了一个可以在CSS中更改的新类，但我无法弄清楚如何直接在jQuery中改变CSS。

我现在正在使用此代码执行span事务：

$("h1").html(function(i, text){
  return text.replace(/\w+\s/, function(match){
    return '<span class="first_word"> + match + '</span>;
}); });

我正在尝试将标题的第一个单词作为新颜色和字体系列。它适用于我的h1，但我也有一个小部件标题h3，当我将它添加到选择中时，它以纯文本显示添加的跨度。所以我想改变第一个单词的css而不是添加跨度。 （我也不知道“/ \ w + \ s /”是做什么的，所以解释这将是一个额外的奖励:)）

谢谢你明智的人！

Answer 1

第一个字母和第一行伪元素，但没有第一个字。你需要跨度。

Answer 2

根据我的理解，你有两个问题。

如何修改上面的代码使其适用于H1和H3，第二个问题是关于正则表达式/ \ w + \ s /.

1）您可以使用Jquery多重选择器：

$("h1, h3").html(function(i, text){
  return text.replace(/\w+\s/, function(match){
    return '<span class="first_word"> + match + '</span>;
}); });

有关更多文档，您可以看到JQuery Documentation for multiselector。

2）/ \ w + \ s /是正则表达式。这是三部分表达。第一个是\ w，代表任何“单词”字符。这是：[a-zA-Z0-9_]的捷径。第二个是+会让你有多个[a-zA-Z0-9_]。它会将这些字符分组以创建一个单词，最后一部分是用来匹配单词的\ s，直到空格出现。您可以在此Regex Documentation中获取有关Regex Word Boundary的其他信息。

Answer 3

首字改变.....

$('h1').each(function() {
var jqt = $(this);
var txt = jqt.text();
jqt.html('<span style="font-size:200%">'+txt.substring(0,(txt.indexOf(" ")))+'</span>'+ txt.substring((txt.indexOf(" "))));
});

Answer 4

下面的脚本只需编辑h1内容的HTML，然后 用\w+元素包围单词（span RegEx）。

jQuery(document).ready(function( $ ){
    
    $('h1').each(function(){
     var me = $(this);
     me.html(me.html().replace(/^(\w+)/, '<span>$1</span>'));
});

});

CSS

h1 span {
    font-weight: 400;
    color: red;
}

Answer 5

您可以使用.css方法。比照http://api.jquery.com/css/

您可能需要类似

的内容

$(".first_word").css('color', 'red');

左右。

另外：/ \ w + \ s /是一个正则表达式，用一个单词后跟空格。