本文目錄一覽：
- 1、js如何替換網頁內容？能做的獎勵50
- 2、怎麼替換網頁中的JS函數
- 3、如何用javascript全部替換網頁內某個字符串
- 4、怎樣用js替換網頁里的指定字符串?
- 5、《web前端筆記7》js字符—獲取、查找、遍歷、提取、替換方法總結
js如何替換網頁內容？能做的獎勵50
js替換網頁內容，方法如下：
1、加載網頁內容的部分設置id如：div id=”content”內容部分/div
2、js更改此處內容顯示如下：
scriptdocument.getElementById(‘content’).innerHTML=”更改內容信息”;/script
完整代碼如下：
div id=”content”內容部分/div
scriptdocument.getElementById(‘content’).innerHTML=”更改內容信息”;/script
上述方法需要注意div和script的順序
還可以使用js函數來更改
script
function genggai(){
document.getElementById(‘content’).innerHTML=”更改內容信息”;
}
/script
div id=”content”內容部分/div
input type=”button” onClick=”genggai()” value=”點擊更換”
怎麼替換網頁中的JS函數
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是替代查找到的字符串。。為了幫助大家更好的理解，下面舉個簡單例子說明一下
如何用javascript全部替換網頁內某個字符串
步驟：
1、 通過正則表達式，實現replaceAll的功能
2、通過body.innerHTML獲取網頁信息
3、替換body中的內容，再賦值給body
示例：
body
p測試/p
/body
script type=”text/javascript”
String.prototype.replaceAll = function(reallyDo, replaceWith, ignoreCase) {
//自定義replaceAll方法，reallyDo：被搜索的子字符串。replaceWith：用於替換的子字符串
if (!RegExp.prototype.isPrototypeOf(reallyDo)) {
return this.replace(new RegExp(reallyDo, (ignoreCase ? “gi”: “g”)), replaceWith);
} else {
return this.replace(reallyDo, replaceWith);
}
}
/script
script
var bd = document.getElementsByTagName(‘body’)[0];//獲取body節點
var s = new String(bd.innerHTML);//獲取body的html信息
var a = s.replaceAll(‘p’,’div’);//把節點p替換成div
delete s;//釋放變量s
bd.innerHTML = a;//更新body的html信息
delete a;//釋放變量a
/script
怎樣用js替換網頁里的指定字符串?
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 比我聰明的你，看完上面的例子之後，會發現第二個錯別字“終古”並沒有被替換成“中國”，我們可以執行二次replace方法把第二個錯別字“終古”也替換掉，程序經過改進之後如下：
Js代碼
script language=”javascript”
var stringObj=”終古人民共和國，終古人民”;
//替換錯別字“終古”為“中國”
//並返回替換後的新字符
//原字符串stringObj的值沒有改變
var newstr=stringObj.replace(“終古”,”中國”);
newstr=newstr.replace(“終古”,”中國”);
alert(newstr);
/script 我們可以仔細的想一下，如果有N的N次方個錯別字，是不是也要執行N的N次方replace方法來替換掉錯別字呢？？呵，不用怕，有了正則表達式之後不用一個錯別字要執行一次replace方法。。程序經過改進之後的代碼如下
Js代碼
script language=”javascript”
var reg=new RegExp(“終古”,”g”); //創建正則RegExp對象
var stringObj=”終古人民共和國，終古人民”;
var newstr=stringObj.replace(reg,”中國”);
alert(newstr);
/script 上面講的是replace方法最簡單的應用，不知道大家有沒有看懂？？下面開始講稍微複雜一點的應用。。 大家在一些網站上搜索文章的時候，會發現這麼一個現象，就是搜索的關鍵字會高亮改變顏色顯示出來？？這是怎麼實現的呢？？其實我們可以用正則表達式來實現，具體怎麼樣實現呢？簡單的原理請看下面的代碼
Js代碼
script language=”javascript”
var str=”中華人民共和國，中華人民共和國”;
var newstr=str.replace(/(人)/g,”font color=red$1/font”);
document.write(newstr);
/script 上面的程序缺少互動性，我們再改進一下程序，實現可以自主輸入要查找的字符
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表示的就是左邊表達式中括號內的字符，即第一個子匹配，同理可得$2表示第二個子匹配。。什麼是子匹配呢？？通俗點講，就是左邊每一個括號是第一個字匹配，第二個括號是第二個子匹配。。 當我們要把查找到的字符進行運算的時候，怎麼樣實現呢？？在實現之前，我們先講一下怎麼樣獲取某一個函數的參數。。在函數Function的內部，有一個arguments集合，這個集合存儲了當前函數的所有參數，通過arguments可以獲取到函數的所有參數，為了大家理解，請看下面的代碼
Js代碼
script language=”javascript”
function test(){
alert(“參數個數：”+arguments.length);
alert(“每一個參數的值：”+arguments[0]);
alert(“第二個參數的值”+arguments[1]);
//可以用for循環讀取所有的參數
}
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 我們驚奇的發現，匿名函數竟然被執行了二次，並且在函數里還帶有三個參數，為什麼會執行二次呢？？這個很容易想到，因為我們寫的正則表達式是匹配單個數字的，而被檢測的字符串剛好也有二個數字，故匿名函數被執行了二次。。在匿名函數內部的那三個參數到底是什麼內容呢？？為了弄清這個問題，我們看下面的代碼。
Js代碼
script language=”javascript”
function test(){
for(var i=0;iarguments.length;i++){
alert(“第”+(i+1)+”個參數的值：”+arguments);
}
}
var reg=new RegExp(“\\d”,”g”);
var str=”abd1afa4sdf”;
str.replace(reg,test);
/script 經過觀察我們發現，第一個參數表示匹配到的字符，第二個參數表示匹配時的字符最小索引位置(RegExp.index)，第三個參數表示被匹配的字符串(RegExp.input)。其實這些參數的個數，還會隨着子匹配的變多而變多的。弄清這些問題之後，我們可以用另外的一種寫法
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
《web前端筆記7》js字符—獲取、查找、遍歷、提取、替換方法總結
（1）字符串就是零個或多個排在一起的字符。
（2）放在單引號或雙引號之中。 ‘abc’ “abc”。
（3）單引號字符串的內部，可以使用雙引號。
（4）雙引號字符串的內部，可以使用單引號。
（5）反引號“ ：反引號允許跨行。
反引號允許字符串跨越多行並可以使用
${…} 在字符串中嵌入表達式。
（1）charAt 方法返回指定位置的字符，參數是從0開始編號的位置。
找一個字符串中的某個位置是那個字符串。
charCodeAt：返回字符串指定位置的 Unicode 碼點（十進制表示）
（2）[]
字符串可以被視為字符串數組，因此可以用數組的方括號運算符，用來返回某個位置的字符
但是字符串只是數組的相似性而已實際上、沒辦法改變字符串中的某個字符
length 只是返回了字符串的長度，該屬性沒辦法改變
字符串使用Unicode字符集，js內部所有的都是Unicode表示的。
JavaScript中的字符串使用的是 UTF-16 編碼。
toLowerCase() 和 toUpperCase()方法可以改變大小寫。
String對象是js原生提供的三個包裝對象之一。用來生成字符串對象。
（1）構造函數
字符串對象是一個類數組對象，很像數組，但不是真正的數組。
（2）將任意的值轉成字符
用於連接兩個字符串，返回一個新字符串，不改變原字符串。
從原字符串取出子字符串並返回，不改變原字符串。
它的第一個參數是子字符串的開始位置，
第二個參數是子字符串的結束位置（不含該位置）。
如果省略第二個參數，則表示子字符串一直到原字符串結束。
用於從原字符串取出子字符串並返回，不改變原字符串，跟slice方法很相像。
它的第一個參數表示子字符串的開始位置，
第二個位置表示結束位置（返回結果不含該位置）
如果省略第二個參數，則表示子字符串一直到原字符串結束。
區別：slice 和 substring的區別？
slice：
如果參數是負值，表示從結尾開始倒數計算的位置，即該負值加上字符串長度。
如果第一個參數大於第二個參數（正數情況下），slice()方法返回一個空字符串。
substring：
如果第一個參數大於第二個參數，substring方法會自動更換兩個參數的位置。
如果參數是負數，substring方法會自動將負數轉為0。
由於這些規則違反直覺，因此不建議使用substring方法，應該優先使用slice。
總結：獲取子字符串，使用 slice 或 substring。
用於確定一個字符串在另一個字符串中第一次出現的位置，
返回結果是匹配開始的位置。如果返回-1，就表示不匹配。
indexOf方法還可以接受第二個參數，表示從該位置開始向後匹配。
lastIndexOf
lastIndexOf方法的用法跟indexOf方法一致，主要的區別是lastIndexOf從尾部開始匹配，indexOf則是從頭部開始匹配。
總結：查找子字符串時，使用 indexOf 或 includes/startsWith/endsWith 進行簡單檢查。
endsWith 用來判斷當前字符串是否是以另外一個給定的子字符串“結尾”的，根據判斷結果返回 true 或 false。
用於去除字符串兩端的空格，返回一個新字符串，不改變原字符串。
toLowerCase方法用於將一個字符串全部轉為小寫，
toUpperCase則是全部轉為大寫。
它們都返回一個新字符串，不改變原字符串
split方法按照給定規則分割字符串，返回一個由分割出來的子字符串組成的數組。
如果分割規則為空字符串，則返回數組的成員是原字符串的每一個字符。
如果省略參數，則返回數組的唯一成員就是原字符串。
split方法還可以接受第二個參數，限定返回數組的最大成員數。
返回一個新字符串，表示將原字符串重複n次。
字符串補全長度的功能。如果某個字符串不夠指定長度，
會在頭部或尾部補全。padStart()用於頭部補全，padEnd()用於尾部補全。
trimStart()消除字符串頭部的空格，
trimEnd()消除尾部的空格。
返回一個由替換值（replacement）替換部分或
所有的模式（pattern）匹配項後的新字符串。
模式可以是一個字符串或者一個正則表達式，
替換值可以是一個字符串或者一個每次匹配都要調用的回調函數。
如果pattern是字符串，則僅替換第一個匹配項.
web前端筆記4-有講 如果感興趣、請參考之前文章
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/237198.html
微信掃一掃 
支付寶掃一掃 