JavaScript實現(xiàn)文本目標字符替換和一鍵全部替換
更新時間：2022年06月07日 11:09:22 作者：??靈扁扁????
這篇文章主要介紹了JavaScript實現(xiàn)文本目標字符替換和一鍵全部替換，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下
需求描述:
實現(xiàn)在文本中替換目標字符，以及一鍵全部替換功能。
技術(shù)點:
利用string的replace實現(xiàn)替換第一個找到的目標字符。
replace(searchValue: string | RegExp, replaceValue: string): string;
利用string的replaceAll實現(xiàn)一鍵替換全部找到的目標字符。
replace(searchValue: string | RegExp, replacer: (substring: string, ...args: any[]) => string): string;
完整demo示例：
效果圖:
完整代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js實現(xiàn)文本字符替換全部替換</title>
</head>
<body>
<textarea name="textarea" id="text" rows="10" cols="50">標準測試技術(shù)，紅糖標準，酸奶標準，瀏覽器運行標準。</textarea>
<div>
查找<input
id="oldVal"
placeholder="要查找的內(nèi)容"
value="">
替換<input id="newVal" placeholder="用來替換的內(nèi)容">
<button onclick="replace()">替換</button>
<button onclick="replace('all')">全部替換</button>
</div>
<script type="text/javascript">
function replace (type) {
let newText = ''
const text = document.getElementById('text').value || ''
const oldVal = document.getElementById('oldVal').value || ''
const newVal = document.getElementById('newVal').value || ''
if (type === 'all') {
// 全部替換
newText = text.replaceAll(oldVal, newVal)
} else {
// 替換找到的第一個
newText = text.replace(oldVal, newVal)
}
// 將替換后的內(nèi)容，更新到文檔上
document.getElementById('text').value = newText
}
</script>
</body>
</html>到此這篇關(guān)于JavaScript實現(xiàn)文本目標字符替換和一鍵全部替換的文章就介紹到這了,更多相關(guān)js文本替換內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了詳解如何webpack使用DllPlugin，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
HTML中setCapture、releaseCapture 使用方法淺析
本文給大家簡單介紹了下html中的高級拖動技術(shù)setCapture、releaseCapture的使用方法，有需要的小伙伴可以參考下2016-09-09
這篇文章主要介紹了javascript跨瀏覽器的屬性判斷的方法,需要的朋友可以參考下2014-03-03
Javascript生成全局唯一標識符（GUID,UUID）的方法
本文給大家匯總介紹了5種使用javascript實現(xiàn)全局唯一標識符（GUID,UUID）的方法，非常的全面，有需要的小伙伴可以來參考下2016-02-02
這篇文章主要介紹了簡單了解TypeScript中如何繼承 Error 類，一個典型的網(wǎng)站服務器可能需要有 NetworkError, DatabaseError, UnauthorizedError 等。 我們希望這些類都擁有 Error 的特性：有錯誤消息、有調(diào)用棧、有方便打印的 toString 等。,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了JS函數(shù)基本定義與用法,結(jié)合實例形式分析了JavaScript函數(shù)基本定義、參數(shù)、返回值等相關(guān)使用技巧,需要的朋友可以參考下2020-01-01
這篇文章主要為大家詳細介紹了JS實現(xiàn)簡單移動端鼠標拖拽，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
在?localStorage?中上傳和檢索存儲圖像的示例詳解
這篇文章主要介紹了在?localStorage?中上傳和檢索存儲圖像,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
javascript firefox兼容ie的dom方法腳本
js firefox下兼容ie的dom的實現(xiàn)方法小結(jié)。利用我們?yōu)榱思嫒荻酁g覽器寫出更好的效果代碼2008-05-05
本文通過2個示例來給大家分享了下原生javascript結(jié)合ajax實現(xiàn)數(shù)據(jù)請求的方法以及原理，非常的簡單實用，有需要的小伙伴可以參考下2016-04-04