如何使用 jQuery 在文本的所有单词下划线？

给定一个语句，任务是使用 jQuery 为 HTML 页面的所有文本词加下划线。我们将使用 text-decoration 属性为每个单词添加下划线。

HTML代码：

HTML

  

    
        p span {
            text-decoration: underline;
        }
    
  
    
    

  

    GeeksForGeeks
      
    
        How to underline all the words 
        of a text using jQuery?
    
  
    
        Geeks For Geeks. A computer 
        science portal for Geeks.
    

  

jQuery代码：

$('p').each(function () {
  
    var text_words = $(this).text().split(' ');
  
    $(this).empty().html(function () {
  
        for (i = 0; i < text_words.length; i++) {
            if (i === 0) {
                $(this).append('' 
                + text_words[i] + '');
            } else {
                $(this).append(' ' 
                + text_words[i] + '');
            }
        }
    });
});

最终代码：下面的代码是上面两个代码片段的组合。

  

    
        p span {
            text-decoration: underline;
        }
    
  
    
    

  

    GeeksForGeeks
  
    
        How to underline all the words 
        of a text using jQuery?
    
  
    
        Geeks For Geeks. A computer 
        science portal for Geeks.
    
      
    
        $(document).ready(function () {
            $('p').each(function () {
                var text_words = 
                    $(this).text().split(' ');
  
                $(this).empty().html(function () {
                    for (i = 0; i < text_words.length; i++) {
                        if (i === 0) {
                            $(this).append('<span>' 
                            + text_words[i] + '</span>');
                        }
                        else {
                            $(this).append(' <span>' 
                            + text_words[i] + '</span>');
                        }
                    }
                });
            });
        });
    

  

输出：

下面列出了支持的浏览器：

• 谷歌浏览器
• IE浏览器
• 火狐
• 歌剧
• 苹果浏览器