本篇文章給大家談談前端字符串替換，以及前端字符串替換所有對應的知識點，希望對各位有所幫助，不要忘了收藏本站喔。

本文目錄一覽：

• 1、《web前端筆記7》js字符—獲取、查找、遍歷、提取、替換方法總結
• 2、JS里面替換指定范圍字符串的方法
• 3、js 中如何替換字符串？
• 4、JS在html中的字符串替換

《web前端筆記7》js字符—獲取、查找、遍歷、提取、替換方法總結

（1）字符串就是零個或多個排在一起的字符。

（2）放在單引號或雙引號之中。 'abc' "abc"。

（3）單引號字符串的內(nèi)部，可以使用雙引號。

（4）雙引號字符串的內(nèi)部，可以使用單引號。

（5）反引號`` ：反引號允許跨行。

反引號允許字符串跨越多行并可以使用

${…} 在字符串中嵌入表達式。

（1）charAt 方法返回指定位置的字符，參數(shù)是從0開始編號的位置。

找一個字符串中的某個位置是那個字符串。

charCodeAt：返回字符串指定位置的 Unicode 碼點（十進制表示）

（2）[]

字符串可以被視為字符串數(shù)組，因此可以用數(shù)組的方括號運算符，用來返回某個位置的字符

但是字符串只是數(shù)組的相似性而已實際上、沒辦法改變字符串中的某個字符

length 只是返回了字符串的長度，該屬性沒辦法改變

字符串使用Unicode字符集，js內(nèi)部所有的都是Unicode表示的。

JavaScript中的字符串使用的是 UTF-16 編碼。

toLowerCase() 和 toUpperCase()方法可以改變大小寫。

String對象是js原生提供的三個包裝對象之一。用來生成字符串對象。

（1）構造函數(shù)

字符串對象是一個類數(shù)組對象，很像數(shù)組，但不是真正的數(shù)組。

（2）將任意的值轉成字符

用于連接兩個字符串，返回一個新字符串，不改變原字符串。

從原字符串取出子字符串并返回，不改變原字符串。

它的第一個參數(shù)是子字符串的開始位置，

第二個參數(shù)是子字符串的結束位置（不含該位置）。

如果省略第二個參數(shù)，則表示子字符串一直到原字符串結束。

用于從原字符串取出子字符串并返回，不改變原字符串，跟slice方法很相像。

它的第一個參數(shù)表示子字符串的開始位置，

第二個位置表示結束位置（返回結果不含該位置）

如果省略第二個參數(shù)，則表示子字符串一直到原字符串結束。

區(qū)別：slice 和 substring的區(qū)別？

slice：

如果參數(shù)是負值，表示從結尾開始倒數(shù)計算的位置，即該負值加上字符串長度。

如果第一個參數(shù)大于第二個參數(shù)（正數(shù)情況下），slice()方法返回一個空字符串。

substring：

如果第一個參數(shù)大于第二個參數(shù)，substring方法會自動更換兩個參數(shù)的位置。

如果參數(shù)是負數(shù)，substring方法會自動將負數(shù)轉為0。

由于這些規(guī)則違反直覺，因此不建議使用substring方法，應該優(yōu)先使用slice。

總結：獲取子字符串，使用 slice 或 substring。

用于確定一個字符串在另一個字符串中第一次出現(xiàn)的位置，

返回結果是匹配開始的位置。如果返回-1，就表示不匹配。

indexOf方法還可以接受第二個參數(shù)，表示從該位置開始向后匹配。

lastIndexOf

lastIndexOf方法的用法跟indexOf方法一致，主要的區(qū)別是lastIndexOf從尾部開始匹配，indexOf則是從頭部開始匹配。

總結：查找子字符串時，使用 indexOf 或 includes/startsWith/endsWith 進行簡單檢查。

endsWith 用來判斷當前字符串是否是以另外一個給定的子字符串“結尾”的，根據(jù)判斷結果返回 true 或 false。

用于去除字符串兩端的空格，返回一個新字符串，不改變原字符串。

toLowerCase方法用于將一個字符串全部轉為小寫，

toUpperCase則是全部轉為大寫。

它們都返回一個新字符串，不改變原字符串

split方法按照給定規(guī)則分割字符串，返回一個由分割出來的子字符串組成的數(shù)組。

如果分割規(guī)則為空字符串，則返回數(shù)組的成員是原字符串的每一個字符。

如果省略參數(shù)，則返回數(shù)組的唯一成員就是原字符串。

split方法還可以接受第二個參數(shù)，限定返回數(shù)組的最大成員數(shù)。

返回一個新字符串，表示將原字符串重復n次。

字符串補全長度的功能。如果某個字符串不夠指定長度，

會在頭部或尾部補全。padStart()用于頭部補全，padEnd()用于尾部補全。

trimStart()消除字符串頭部的空格，

trimEnd()消除尾部的空格。

返回一個由替換值（replacement）替換部分或

所有的模式（pattern）匹配項后的新字符串。

模式可以是一個字符串或者一個正則表達式，

替換值可以是一個字符串或者一個每次匹配都要調(diào)用的回調(diào)函數(shù)。

如果pattern是字符串，則僅替換第一個匹配項.

web前端筆記4-有講 如果感興趣、請參考之前文章

JS里面替換指定范圍字符串的方法

說個笨方法吧：

1、先把你指定的字符串拆分下來

2、然后將拆分出來的字符串使用replaceAll進行替換

3、最后將替換后的字符串和未替換的部分連接起來。

js 中如何替換字符串？

JS字符串替換函數(shù):Replace(“字符串1″, “字符串2″)， ? 1.我們都知道JS中字符串替換函數(shù)是Replace(“字符串1″, “字符串2″)，但是這個函數(shù)只能將第一次出現(xiàn)的字符串1替換掉，那么我們?nèi)绾尾拍芤淮涡匀刻鎿Q掉了？ ? script ? var s = "LOVE LIFE ！ LOVE JAVA ..."; ?alert(s); ? alert(s.replace("LOVE ", "愛")); ?alert(s.replace(/\LOVE/g, "愛")); ? /script

function formatStr(str) ?{ ?str=str.replace(/\r\n/ig,"br/"); ?return str; ?} ?要注意兩點： ?要使用正則表達式，不能使用 str.replace("\r\n", newString); ，這會導致只替換第一個匹配的子字符串。 ?母字符串中不一定 \r\n 會同時存在，也許只有 \n，沒有 \r 也是可能的。 ? replace方法的語法是：stringObj.replace(rgExp, replaceText) 其中stringObj是字符串(string)，reExp可以是正則表達式對象(RegExp)也可以是字符串(string)，replaceText是替代查找到的字符串。。為了幫助大家更好的理解，下面舉個簡單例子說明一下 ? ?Js代碼 ?script language="javascript" ? var stringObj="終古人民共和國，終古人民"; ? ? ?//替換錯別字“終古”為“中國” ? //并返回替換后的新字符 ? //原字符串stringObj的值沒有改變 ? var newstr=stringObj.replace("終古","中國"); ? alert(newstr); ? /script ? ? ?比我聰明的你，看完上面的例子之后，會發(fā)現(xiàn)第二個錯別字“終古”并沒有被替換成“中國”，我們可以執(zhí)行二次replace方法把第二個錯別字“終古”也替換掉，程序經(jīng)過改進之后如下： ? ?Js代碼 ?script language="javascript" ? var stringObj="終古人民共和國，終古人民"; ? ? ?//替換錯別字“終古”為“中國” ? //并返回替換后的新字符 ? //原字符串stringObj的值沒有改變 ? var newstr=stringObj.replace("終古","中國"); ? ? ?newstr=newstr.replace("終古","中國"); ? alert(newstr); ? /script ? ? ?我們可以仔細的想一下，如果有N的N次方個錯別字，是不是也要執(zhí)行N的N次方replace方法來替換掉錯別字呢？？呵，不用怕，有了正則表達式之后不用一個錯別字要執(zhí)行一次replace方法。。程序經(jīng)過改進之后的代碼如下 ? ?Js代碼 ?script language="javascript" ? var reg=new RegExp("終古","g"); //創(chuàng)建正則RegExp對象 ? var stringObj="終古人民共和國，終古人民"; ? var newstr=stringObj.replace(reg,"中國"); ? alert(newstr); ? /script ?上面講的是replace方法最簡單的應用，不知道大家有沒有看懂？？下面開始講稍微復雜一點的應用。。 ? ?大家在一些網(wǎng)站上搜索文章的時候，會發(fā)現(xiàn)這么一個現(xiàn)象，就是搜索的關鍵字會高亮改變顏色顯示出來？？這是怎么實現(xiàn)的呢？？其實我們可以用正則表達式來實現(xiàn)，具體怎么樣實現(xiàn)呢？簡單的原理請看下面的代碼 ? ?Js代碼 ?script language="javascript" ? var str="中華人民共和國，中華人民共和國"; ? var newstr=str.replace(/(人)/g,"font color=red$1/font"); ? document.write(newstr); ? /script ?上面的程序缺少互動性，我們再改進一下程序，實現(xiàn)可以自主輸入要查找的字符 ? ?Js代碼 ?script language="javascript" ? var s=prompt("請輸入在查找的字符","人"); ? var reg=new RegExp("("+s+")","g"); ? var str="中華人民共和國，中華人民共和國"; ? var newstr=str.replace(reg,"font color=red$1/font"); ? document.write(newstr); ? /script ? ?可能大家都會對$1這個特殊字符表示什么意思不是很理解，其實$1表示的就是左邊表達式中括號內(nèi)的字符，即第一個子匹配，同理可得$2表示第二個子匹配。。什么是子匹配呢？？通俗點講，就是左邊每一個括號是第一個字匹配，第二個括號是第二個子匹配。。 ? ?當我們要把查找到的字符進行運算的時候，怎么樣實現(xiàn)呢？？在實現(xiàn)之前，我們先講一下怎么樣獲取某一個函數(shù)的參數(shù)。。在函數(shù)Function的內(nèi)部，有一個arguments集合，這個集合存儲了當前函數(shù)的所有參數(shù)，通過arguments可以獲取到函數(shù)的所有參數(shù)，為了大家理解，請看下面的代碼 ? ?Js代碼 ?script language="javascript" ? function test(){ ? ? alert("參數(shù)個數(shù)："+arguments.length); ? ? alert("每一個參數(shù)的值："+arguments[0]); ? ? alert("第二個參數(shù)的值"+arguments[1]); ? ? //可以用for循環(huán)讀取所有的參數(shù) ? } ? ? ?test("aa","bb","cc"); ? /script ?看懂上面的程序之后，我們再來看下面一個有趣的程序 ? ?Js代碼 ?script language="javascript" ? var reg=new RegExp("\\d","g"); ? var str="abd1afa4sdf"; ? str.replace(reg,function(){alert(arguments.length);}); ? /script ? ? ?我們驚奇的發(fā)現(xiàn)，匿名函數(shù)竟然被執(zhí)行了二次，并且在函數(shù)里還帶有三個參數(shù)，為什么會執(zhí)行二次呢？？這個很容易想到，因為我們寫的正則表達式是匹配單個數(shù)字的，而被檢測的字符串剛好也有二個數(shù)字，故匿名函數(shù)被執(zhí)行了二次。。在匿名函數(shù)內(nèi)部的那三個參數(shù)到底是什么內(nèi)容呢？？為了弄清這個問題，我們看下面的代碼。 ? ?Js代碼 ?script language="javascript" ? function test(){ ? for(var i=0;iarguments.length;i++){ ? ? ? alert("第"+(i+1)+"個參數(shù)的值："+arguments); ? } ? } ? var reg=new RegExp("\\d","g"); ? var str="abd1afa4sdf"; ? str.replace(reg,test); ? /script ? ? ?經(jīng)過觀察我們發(fā)現(xiàn)，第一個參數(shù)表示匹配到的字符，第二個參數(shù)表示匹配時的字符最小索引位置(RegExp.index)，第三個參數(shù)表示被匹配的字符串(RegExp.input)。其實這些參數(shù)的個數(shù)，還會隨著子匹配的變多而變多的。弄清這些問題之后，我們可以用另外的一種寫法 ? ?Js代碼 ?script language="javascript" ? function test($1){ ? ? return "font color=’red’"+$1+"/font" ? } ? var s=prompt("請輸入在查找的字符","人"); ? var reg=new RegExp("("+s+")","g"); ? var str="中華人民共和國，中華人民共和國"; ? var newstr=str.replace(reg,test); ? document.write(newstr); ? /script ?看了上面的程序，原來可以對匹配到的字符為所欲為。下面簡單舉一個應用的例子 ? ?Js代碼 ?script language="javascript" ? var str="他今年22歲，她今年20歲，他的爸爸今年45歲，她的爸爸今年44歲，一共有4人" ? function test($1){ ? ? var gyear=(new Date()).getYear()-parseInt($1)+1; ? ? return $1+"("+gyear+"年出生)"; ? } ? var reg=new RegExp("(\\d+)歲","g"); ? var newstr=str.replace(reg,test); ? alert(str); ? alert(newstr); ? /script

JS在html中的字符串替換

上面font標簽加一個id，font id="idFont" class="cfrq" style="font-size:12px"星期三,星期二/font

這樣在js中就可以

docunment.getElementById("idFont").innerText = "星期二,星期三";

這樣就可以實現(xiàn)你想要的功能

如果你用JQuery的話也可以這樣 $(".cfrq").text("星期二,星期三");

前端字符串替換的介紹就聊到這里吧，感謝你花時間閱讀本站內(nèi)容，更多關于前端字符串替換所有、前端字符串替換的信息別忘了在本站進行查找喔。