小tips:JS/CSS實現字元串單詞首字母大寫

来源:https://www.cnblogs.com/moqiutao/archive/2019/09/02/11449101.html
-Advertisement-
Play Games

css實現: JS代碼一: 註:正則表達式\b會把英文縮寫,譬如I'm拆分成兩個部分,導致輸出為I'M,所以不能使用\b JS代碼二: JS代碼三: JS代碼四: 註:\b:匹配一個單詞邊界,也就是指單詞和空格間的位置。例如, 'erb' 可以匹配"never" 中的 'er',但不能匹配 "ver ...


css實現:

text-transform:capitalize;

JS代碼一:

String.prototype.firstUpperCase = function(){
        return this.replace(/\b(\w)(\w*)/g,function($0,$1,$2){
            return $1.toUpperCase() + $2.toLowerCase();
        })
}
var result = "i'm hello world".firstUpperCase();;
console.log(result); //I'M Hello World

註:正則表達式\b會把英文縮寫,譬如I'm拆分成兩個部分,導致輸出為I'M,所以不能使用\b

JS代碼二:

String.prototype.firstUpperCase = function(){
    let arr = this.split(' ');
    let uppserCase = ([first,...rest]) => first.toUpperCase() + rest.join('');
    let result = '';
    arr.forEach((val) => {
        result += uppserCase(val) + ' ';
    })
    return result;
}
//結果://I'm Hello World 

JS代碼三:

String.prototype.firstUpperCase = function(){
    let arr = this.split(' ');
    let result = '';
    arr.forEach((val) => {
        result += val.charAt(0).toUpperCase() + val.slice(1) + ' ';
    })
    return result;
}
//結果://I'm Hello World 

JS代碼四:

String.prototype.firstUpperCase = function(){
    let arr = this.split(' ');
    let result = '';
    arr.forEach((val) => {
        result += `${val[0].toUpperCase()}${val.slice(1)} `;
    })
    return result;
}
//結果://I'm Hello World 

註:
\b:匹配一個單詞邊界,也就是指單詞和空格間的位置。例如, 'erb' 可以匹配"never" 中的 'er',但不能匹配 "verb" 中的 'er'。
\w:匹配包括下劃線的任何單詞字元。等價於'[A-Za-z0-9_]'。
*:匹配前面的子表達式零次或多次。例如,zo 能匹配 "z" 以及 "zoo"。 等價於{0,}。
\s:匹配任何空白字元,包括空格、製表符、換頁符等等。等價於 [ fnrtv]。
\S:匹配任何非空白字元。等價於 [^ \f\n\r\t\v]。

問題參考地址:JavaScript字元串單詞首字母大寫的實現方式


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • --創建圖片表 CREATE TABLE W_PIC ( ID INT, --編號 WPATH VARCHAR(80), --完整路徑 PIC VARCHAR(80), --圖片名稱,不帶尾碼 img image --圖片內容 ) --圖片表中插入數據 INSERT INTO W_PIC(ID,WP... ...
  • SQL SELECT DISTINCT 語句 在表中,可能會包含重覆值。這並不成問題,不過,有時您也許希望僅僅列出不同(distinct)的值。 關鍵詞 DISTINCT 用於返回唯一不同的值。 語法: 使用 DISTINCT 關鍵詞 如果要從 "Company" 列中選取所有的值,我們需要使用 S ...
  • [學習筆記] /*org.apache.hadoop.mapreduce.Mapper.Context,java.lang.InterruptedException,想看map的源代碼,按control,點擊,出現Attach Source Code,點擊External Location/Exte ...
  • 在工業監控裡面, 需要對每天的數據, 進行記錄, 時間長了之後, 資料庫很容易撐爆. 這時候, 如果允許, 可以對之前的數據進行一次清除, 只記錄幾個月內的數據. 在資料庫中, 進行測試: 執行腳本: 會發現, 表確實被刪除了, 且別的表並未受到影響. 在不能發後臺包的情況下, 可以通過mysql定 ...
  • Android Studio的安裝及第一次啟動時的配置 一、下載Android Studio 百度搜索“Android Studio" 點擊中文社區進入,選擇最新版本下載。 下載後雙擊安裝包開始安裝。 安裝好後點擊程式運行,進入第一次運行時的配置。 出現”Unable to access Andro ...
  • 1、當導入ReactiveObjC.framework後,進行編譯時報錯:framework not found xxx 報錯如下圖: 解決辦法: Targets — Build Settings — Search Paths 在 Framework Search Paths 中添加當前framew ...
  • **本篇只列出零碎的jQuery基礎知識點,個人記錄自己的學習進度,無序排列,謹慎查看。** 1.jQuery入口函數的四種寫法2.jQuery與JS遍曆數組的區別3.jQuery符號衝突問題4.jQuery與JS的map遍歷方法5.each方法和map方法的區別6.jQuery各種靜態方法的使用7 ...
  • 一、背景屬性縮寫的格式 1.backgound:背景顏色 背景圖片 平鋪方式 關聯方式 定位方式 2.註意點: 這裡的所有值都可以省略,但是至少需要一個 3.什麼是背景關聯方式 預設情況下,背景圖片會隨著滾動條的滾動而滾動,如果不想這樣,那麼我們可以修改它們的關聯方式 4.格式: backgroun ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...