使每个句子中的第一个单词加粗的 Jquery 脚本是什么？答案

【问题标题】：what is the Jquery script to make the FIRST WORD in each sentence bold?使每个句子中的第一个单词加粗的 Jquery 脚本是什么？
【发布时间】：2020-10-02 17:12:49
【问题描述】：

我正在尝试使用 jquery 将每个句子的第一个单词加粗。这是针对当前正在做的一个项目。我已将 jquery 留空，任何帮助将不胜感激。

我所看到的所有其他内容都是关于将单词中的第一个字母设为大写，但我需要在每个句子中将第一个单词加粗。

<html>
<body>
<p>First Sentence</p>
<p>Second Sentence</p>
<p>Third Sentence</p>
<p>Fourth Sentence</p>
<p>Fivth Sentence</p>

<script>
$(document).ready(function(){


});
</script>
</body>
</html>

【问题讨论】：

你想要的和把每个p标签的第一个单词加粗一样吗？
在这里提问之前，您应该自己尝试一下，以表明您已经尝试过了。它不必是完整的代码，但像循环所有<p> 元素的结构将是一个开始
你尝试了吗？表现出一些努力...

标签： jquery

【解决方案1】：

$('p').each(function(){  
    var pdata = $(this);  
    pdata.html( pdata.text().replace(/(^\w+)/,'<strong>$1</strong>') );  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
<body> 
<p>First Sentence</p>
<p>Second Sentence</p>
<p>Third Sentence</p>
<p>Fourth Sentence</p>
<p>Fivth Sentence</p>


</body>
</html>

这里可以用addClass方法把每句话的第一个单词加粗吗？

【讨论】：

【解决方案2】：

你可以试试这个：

$('p').each(function(){

var me = $(this);

me.html(me.html().replace(/^(\w+)/, '<span>$1</span>'));

});

【讨论】：

【解决方案3】：

这里

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
         $('p').each(function() {
         var html = $(this).html();
         var word = html.substr(0, html.indexOf(" "));           
         var rest = html.substr(html.indexOf(" "));
         $(this).html(rest).prepend($("<span/>").html("<b>"+word+"</b>") );
  });
});
</script>
</head>
<body>
<p>First Sentence</p>
<p>Second Sentence</p>
<p>Third Sentence</p>
<p>Fourth Sentence</p>
<p>Fivth Sentence</p>

</body>
</html>

【讨论】：

【解决方案4】：

使用split 和join 可以做到这一点。我一步一步的让你明白。

$("p").each(function() { 
  var p = $(this).text();
  var splt = p.split(' ');
  var s = splt[0].split("");
  var x = "<strong>" + s[0] + "</strong>";
  s[0] = x;
  splt[0] = s.join("");

  $(this).html(splt.join(" "));
});
[Fiddle][1]

【讨论】：

这只会给出第一个字母而不是第一个单词。
不，它会给你p的全部内容

【解决方案5】：

$('p').each(function() {
    $(this).html('<strong>'+$(this).text()[0]+'</strong>'+$(this).text().substring(1));
});

...或...

$('p').each(function() {
    this.innerHTML = '<strong>' + this.textContent[0] + '</strong>' + this.textContent.substring(1)
});

【讨论】：

【解决方案6】：

这似乎可以解决问题......我一直在寻找一个更简单的答案，因为我还是个初学者，我不想简单地复制粘贴。

但感谢所有回复的人。

 <style>
.first-word{
    font-weight: bold;
}
</style>

<body>

<p>First Sentence</p>
<p>Second Sentence</p>
<p>Third Sentence</p>
<p>Fourth Sentence</p>
<p>Fivth Sentence</p>


<script>

    $(document).ready(function(){

        $('p').each(function() {
            var word = $(this).html();
            var index = word.indexOf(' ');
            if(index == -1) {
                index = word.length;
            }
            $(this).html('<span class="first-word">' + word.substring(0, index) + '</span>' + word.substring(index, word.length));
        });
        $(document).on("contextmenu",function(){
            return false;
        });
    });

</script>
</body>

【讨论】：

【解决方案7】：

试试这个；

<html>
<body>
 <p>First Sentence</p>
 <p>Second Sentence</p>
 <p>Third Sentence</p>
 <p>Fourth Sentence</p>
 <p>Fivth Sentence</p>

  <script>
  $(document).ready(function(){

    var all = $("p");                          // Select all p tag

    for(var i=0;i<all.length;i++){            //Iterate over the collection

        var html = $(all[i]).html();          //get html
        var firstWord = html.split(" ")[0];   //get first word

        var boldFirstWord = "<b>"+firstWord+"</b>";   // make first word bold html syntax

        var newhtml = html.replace(firstWord, boldFirstWord);  // replace firstword with upper case word

        $(all[i]).html(newhtml);              // replace the html
    }
  });
  </script>
</body>
</html>

【讨论】：

对不起，我错过了。更新了答案。请检查。

【解决方案8】：

另一种方式，更短，0-jQuery

<!DOCTYPE html>
<html>

<head>
</head>

<body>

<p>First Sentence</p>
<p>Second Sentence</p>
<p>Third Sentence</p>
<p>Fourth Sentence</p>
<p>Fivth Sentence</p>

<script>

  for(li of document.querySelectorAll('body > p'))
  {

    let words = li.innerHTML.split(' ');

    li.innerHTML = "<strong>"+words.shift()+"</strong> "+words.join(' ');

  }

</script>

</body>
</html>

【讨论】：

【解决方案9】：

尝试使用一些特殊字符，只有直到该特殊字符的字母才会变为粗体。而是使用 /S 来修复它。

示例： Ståle Solbakken efter stor europæisk nedtur

/w 将在 stor europæisk nedtur 之后返回 Ståle Solbakken

同时

/S 将正确返回 Ståle Solbakken efter stor europæisk nedtur

【讨论】：