資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究基於匹配的正則表示式動態替換資料 - JavaScript？
正則表示式 (或正則表示式) 用於匹配文字字串中的模式。使用 JavaScript，您可以使用正則表示式根據匹配的模式動態替換資料。
本文將解釋如何將正則表示式和 JavaScript 結合使用，以便在程式碼中進行動態替換。我們將介紹正則表示式語法的基礎知識、正則表示式物件以及使用它們與 JavaScript 的方法。
JavaScript 提供各種資料型別來儲存各種型別的值。由於 JavaScript 引擎以動態方式使用變數，因此在使用 JavaScript 時無需指定變數的型別。在這裡，必須使用var指定資料型別。它可以儲存任何型別的值，包括字串、數字等等。
在 JavaScript 中使用 replace()
JavaScript 中的replace()方法用於在字串中搜索指定的值或正則表示式，並返回一個新字串，其中指定的值被替換。replace()方法不會更改原始字串。
語法
以下是replace()的語法
string.replace(searchValue, newValue)
為了更清楚地理解“基於匹配的正則表示式動態更改資料”，讓我們來看下面的例子。
示例
在下面的示例中，我們使用一個正則表示式並將其傳遞給一個函式。然後，函式獲取替換鍵作為輸入，如果可用則替換它們，並以換行符顯示結果。
<!DOCTYPE html>
<html>
<body>
<script>
const Original= "#T1# to the #T2# the #T3# E-way learning";
const replacements = {
T1: "Welcome",
T2: "Tutorialspoint",
T3: "Best"
};
const afterchange = Original.replace(/#([^#]+)#/g, (match, key) => {
return replacements[key] !== undefined ? "<br />" + replacements[key]: "";
});
document.write("Original:", Original+"<br>");
document.write("afterchange:", afterchange);
</script>
</body>
</html>
當指令碼執行時，它將生成一個輸出，其中包含原始模板以及在 Web 瀏覽器上顯示的替換模板，這是由執行指令碼時觸發的事件引起的。
示例
考慮以下示例，其中我們使用正則表示式來動態替換指令碼中使用的資料。
<!DOCTYPE html>
<html>
<body>
<p id="tutorial"></p>
<script>
var val = {
"address_1": "Yes",
"address_2": "Hyderabad",
"address_10": "Permanent",
}
var sentence = `Can I Know The Address: #ADDRESS1# You Are From:#ADDRESS2# Is It Current Or Permanent: #ADDRESS10#`
sentence = sentence.replace(/#ADDRESS(\d+)#/g, function(addr, num) {
var str = val["address_"+num]; return str?str+"<br/>":""
})
document.getElementById("tutorial").innerHTML=(sentence);
</script>
</body>
</html>
執行上述指令碼後，Web 瀏覽器將顯示與正則表示式進行比較的句子，並透過執行此指令碼時觸發的事件在網頁上進行替換。
示例
執行以下程式碼以觀察如何使用正則表示式動態更改值。
<!DOCTYPE html>
<html>
<body>
<p id="tutorial"></p>
<script>
var temp = `My name is {{fullName}} I live in {{countryName}}`;
var details = {
"fullName": "David Miller",
"countryName": "AUS"
}
replaceName = temp.replace(/\{\{(.+?)\}\}/g, (matching, value) => details[value.trim()]);
document.getElementById("tutorial").innerHTML=(replaceName);
</script>
</body>
</html>
當指令碼執行時，事件會被觸發，這使得給定的句子與正則表示式進行比較並被替換，然後顯示替換後的句子。
更新於: 2023年1月18日
3K+ 閱讀量
廣告