首頁 > web前端 > js教程 > 主體

JS字串replace()方法

WBOY
發布: 2024-07-26 12:23:33
原創
522 人瀏覽過

The JS string replace() method

簡介

字串replace()方法通常是Javascript學生在學習初期就學習過的,但當時只涵蓋了基本的使用形式,以後通常不會再回顧該主題。因此,許多 Javascript 開發人員僅以最基本的形式使用它。

基本用途

replace() 的基本用法包括向其傳遞兩個字串。第一個是要替換的字串,第二個是用於替換的字串。

const strOriginal = "The quick brown fox jumps over the lazy dog.";
const strReplaced = strOriginal.replace("jumps", "flies");
console.log(strReplaced);
登入後複製

產生以下輸出:

The quick brown fox flies over the lazy dog.
登入後複製

正規表示式

除了提供字串作為replace()的第一個參數之外,還可以提供正規表示式。

const strOriginal = "The PIN is 1234."
const strReplaced = strOriginal.replace(/\b\d{4}\b/, "<redacted>");
console.log(strReplaced);//The PIN is <redacted>.
登入後複製

d 符合一個數字,而 {4} 剛好符合其中的 4 個數字。開頭和結尾處的 b 匹配邊界。這可以防止匹配長度超過 4 位的數字部分。 在實際使用中,您可能需要額外的代碼來區分 4 位數字序列和電話號碼或信用卡號碼的一部分,但我忽略了這一點,因為這不是正規表示式教學。

替換功能

replace() 方法的第二個參數可以是一個函數。此函數傳回的任何內容都用於替換第一個參數中指定的匹配文字。這適用於作為第一個參數提供的字串和正規表示式。

當replace()的第一個參數是字串或沒有捕獲組的正規表示式時,replacer函數將按以下順序傳遞3個參數:

  1. 匹配的文字
  2. 比賽位置
  3. 原始完整字串

如果replace()的第一個參數是帶有捕獲組的正規表示式,則第二個和所有後續參數(除了最後兩個)都將是捕獲。倒數第二個將是第一次捕獲的位置,最後一個參數將是原始的完整字串。

如果正規表示式與全域標誌一起使用,則為找到的每個匹配項呼叫該函數一次。

replacer函數很少伴隨字串作為replace()的第一個參數,因為字串是一個常數值,所以通常可以預先計算它的替代值。 但是,它可以與字串一起使用來執行以下操作:

const names = ["birds", "dogs", "cats", "pandas"];
const str = "We hold these truths to be self-evident, that all <ANIMALS> are created equal."
const strReplaced = str.replace("<ANIMALS>",
    ()=> names[Math.floor(Math.random() * names.length)]
);
console.log(strReplaced);

登入後複製

這取代了「」從名稱數組中隨機選擇一個字串來產生一個隨機句子,如下所示:

We hold these truths to be self-evident, that all dogs are created equal.
登入後複製

將正規表示式與替換函數結合

replacer 函數的真正威力在於將其與正規表示式結合起來作為replace() 的第一個參數。由於正規表示式可以匹配模式,因此它可以匹配事先未知的字串,因此可能需要一個函數來處理匹配的文字以產生其替換。

以下是將蛇形大小寫轉換為駝峰大小寫的範例:

const snakeStr = "my_favorite_variable_name";
function snakeToCamelCase(str) {
    return str.replace(/_(\w)/g, function(_, letter) {
        return letter.toUpperCase();
    });
}
console.log(snakeToCamelCase(snakeStr)); //myFavoriteVariableName
登入後複製

w 匹配文字的單一字元。它位於正規表示式中的下劃線之後,因此它將匹配下劃線之後的第一個字母。括號用於建立一個捕獲組,其中僅包含該字母,而不包含下劃線作為字串的一部分。 (只取匹配的第二個字元很簡單,但我想說明捕獲組。) 這封信由替換函數接收作為其第二個參數,然後將其大寫並返回作為最初由下劃線和字母組成的整個子字串的替代,因此這會刪除下劃線並將其後面的字母大寫。

這是另一個將十六進位顏色代碼轉換為 RGB 顏色的範例。

const css = `body{
    background-color: #88FF00;
    color: #0d2651;
}`;
const hex2RGB = str => str.replace(/#[0-9A-F]{6}/ig,(hex)=>{
    return "rgb(" +
        //skip first character which is #
        parseInt(hex.substring(1,3), 16) +
        ", " +
        parseInt(hex.substring(3,5), 16) +
        ", " +
        parseInt(hex.substring(5,7), 16) +
        ")";
});
console.log(hex2RGB(css));
登入後複製

結果輸出是:

body{
    background-color: rgb(136, 255, 0);
    color: rgb(13, 38, 81);
}
登入後複製

正規表示式匹配 # 後面跟著 6 個十六進位數字,這些數字定義為字元 0 到 9 以及 A 到 F。 i 標誌用於忽略大小寫,因此它適用於大寫和小寫。 替換函數從十六進位程式碼中取得子字串並解析它們以產生十進位數字,並將這些數字放置在「rgb(」和「)」之間以產生 rgb() 顏色。

結論

修改現有字串的方法有很多,但是當目標是根據內容而不是位置替換子字串時,使用replace()方法通常是一個不錯的選擇。 如果沒有它,典型的解決方案包括首先搜尋子字串的位置,然後在該點分割字串並與替換字串連接,這是效率不高的。

以上是JS字串replace()方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板