Question

我正在尝试使用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>

Answer 1

＆＃13;

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

＆＃13;

<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>

＆＃13;

我可以使用addClass方法将每个句子的第一个单词加粗吗？

Answer 2

你可以试试这个：

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

var me = $(this);

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

});

Answer 3

下面

＆＃13;

<!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>

＆＃13;

Answer 4

试试这个;

<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>

Answer 5

使用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]

Answer 6

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

＆＃13;

<!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>

＆＃13;

Answer 7

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

Answer 8

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

但感谢所有回复的人。

 <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>

Answer 9

尝试使用一些特殊字符，只有该特殊字符之前的字母将被加粗。而是使用/ S对其进行修复。

示例： StåleSolbakken efter storeuropæisknedtur

/ w将返回 St åleSolbakken efter storeuropæisknedtur

同时

/ S将正确返回Ståle Solbakken efter storeuropæisknedtur

什么是Jquery脚本使每个句子中的FIRST WORD变粗？

9 个答案: