使用jQuery，选择元素的第一个单词并改变css

我已经看到了很多例子，说明了如何获取元素的第一个单词并在其周围添加一个跨距，为该元素提供一个可以在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，而不是添加一个span。我也不知道/\w+\s/在做什么，解释这将是一个额外的奖励：

---

谢谢你们这些聪明人

您可以使用.css方法。比照

你可能想要像这样的东西

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

大概吧

---

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

您可以使用.css方法。比照

你可能想要像这样的东西

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

大概吧

---

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

有第一个字母和第一行伪元素，但没有第一个单词。您需要span。

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

据我所知，你有两个问题

如何修改上面的代码以使其与H1和H3一起工作，第二个问题是关于regex/\w+\s/

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

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

有关更多文档，请参见

---

2/\w+\s/是一个正则表达式。它由三部分组成。第一个是\w，表示任何单词字符。这是[a-zA-Z0-9]的捷径。第二个是+可以让你有多个[a-zA-Z0-9]。它将对这些字符进行分组以创建一个单词，最后一部分表示匹配该单词，直到出现空格。你可以在这里获得关于Regex单词边界的更多信息。

据我所知，你有两个问题

如何修改上面的代码以使其与H1和H3一起工作，第二个问题是关于regex/\w+\s/

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

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

有关更多文档，请参见

---

2/\w+\s/是一个正则表达式。它由三部分组成。第一个是\w，表示任何单词字符。这是[a-zA-Z0-9]的捷径。第二个是+可以让你有多个[a-zA-Z0-9]。它将对这些字符进行分组以创建一个单词，最后一部分表示匹配该单词，直到出现空格。您可以在此中获取有关正则表达式单词边界的其他信息。

有关第一个单词的更改

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

---

对于第一个单词的更改

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

下面的脚本只是编辑h1内容的HTML和 用span元素包围\w+RegEx中的单词

下面的脚本只是编辑h1内容的HTML和 用span元素包围\w+RegEx中的单词

---

你的意思是：$.first_word.css'color'、'red'；。css听起来像是OP所要求的，但是选择器确实需要像@Steve提到的那样进行修改。你的意思是：$.first_word.css'color'、'red'；。css听起来像是OP所要求的，但是选择器确实需要像@Steve提到的那样进行修改。这很好地解释了第二个问题，谢谢！不过，我不想增加跨度。我想我想要分配一个CSS更改来匹配，而不需要添加跨度或给它一个类。也许不允许将CSS属性分配给变量，只允许更改类或ID？这很好地解释了第二个问题，谢谢！不过，我不想增加跨度。我想我想要分配一个CSS更改来匹配，而不需要添加跨度或给它一个类。也许不允许将CSS属性分配给变量，只更改类或ID？所以我不能对变量中的字符串进行CSS属性更改？只适用于类或ID？对。没有用于任意字符串段的CSS选择器。所以我无法对变量中的字符串进行CSS属性更改？只适用于类或ID？对。没有用于任意字符串段的CSS选择器。感谢您的帮助。看来我不能完全做到我想要的，但是你的回答很有帮助！谢谢大家的帮助。看来我不能完全做到我想要的，但是你的回答很有帮助！请编辑您的答案并提供代码说明。请编辑您的答案并提供代码说明。