JavaScript實(shí)現(xiàn)文本目標(biāo)字符替換和一鍵全部替換
更新時(shí)間：2022年06月07日 11:09:22 作者：??靈扁扁????
這篇文章主要介紹了JavaScript實(shí)現(xiàn)文本目標(biāo)字符替換和一鍵全部替換，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
需求描述:
實(shí)現(xiàn)在文本中替換目標(biāo)字符，以及一鍵全部替換功能。
技術(shù)點(diǎn):
利用string的replace實(shí)現(xiàn)替換第一個(gè)找到的目標(biāo)字符。
replace(searchValue: string | RegExp, replaceValue: string): string;
利用string的replaceAll實(shí)現(xiàn)一鍵替換全部找到的目標(biāo)字符。
replace(searchValue: string | RegExp, replacer: (substring: string, ...args: any[]) => string): string;
完整demo示例：
效果圖:
完整代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js實(shí)現(xiàn)文本字符替換全部替換</title>
</head>
<body>
<textarea name="textarea" id="text" rows="10" cols="50">標(biāo)準(zhǔn)測(cè)試技術(shù)，紅糖標(biāo)準(zhǔn)，酸奶標(biāo)準(zhǔn)，瀏覽器運(yùn)行標(biāo)準(zhǔn)。</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 {
// 替換找到的第一個(gè)
newText = text.replace(oldVal, newVal)
}
// 將替換后的內(nèi)容，更新到文檔上
document.getElementById('text').value = newText
}
</script>
</body>
</html>到此這篇關(guān)于JavaScript實(shí)現(xiàn)文本目標(biāo)字符替換和一鍵全部替換的文章就介紹到這了,更多相關(guān)js文本替換內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
JS操作二進(jìn)制很麻煩，而且一直沒有一個(gè)好的無損壓縮工具來實(shí)現(xiàn)純文本的壓縮。2010-04-04
這篇文章主要為大家詳細(xì)介紹了js仿3366小游戲選字游戲2016-04-04
uniApp獲取當(dāng)前位置經(jīng)緯度的示例代碼
這篇文章主要介紹了uniApp獲取當(dāng)前位置經(jīng)緯度,以下是使用uni.getLocation獲取當(dāng)前位置的示例代碼,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了使用jquery解析XML的方法,代碼簡(jiǎn)潔實(shí)用,需要的朋友可以參考下2014-09-09
關(guān)于動(dòng)態(tài)執(zhí)行代碼(js的Eval)實(shí)例詳解
下面小編就為大家?guī)硪黄P(guān)于動(dòng)態(tài)執(zhí)行代碼(js的Eval)實(shí)例詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
我寫JavaScript代碼已經(jīng)很久了，都記不起是什么年代開始的了。本文給大家分享javascript七大技巧(二)，對(duì)javascript技巧相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2015-12-12
JS實(shí)現(xiàn)表單驗(yàn)證功能(驗(yàn)證手機(jī)號(hào)是否存在，驗(yàn)證碼倒計(jì)時(shí))
js實(shí)現(xiàn)表單驗(yàn)證功能，通過js代碼驗(yàn)證手機(jī)號(hào)是否存在驗(yàn)證碼倒計(jì)時(shí)功能，代碼簡(jiǎn)單易懂非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧2016-10-10
Cookie就是這樣的一種機(jī)制。它可以彌補(bǔ)HTTP協(xié)議無狀態(tài)的不足。在Session出現(xiàn)之前，基本上所有的網(wǎng)站都采用Cookie來跟蹤會(huì)話。下面通過本文給大家介紹JS中cookie的使用及缺點(diǎn)，需要的朋友參考下吧2017-05-05
這篇文章主要介紹了js中延遲加載和預(yù)加載的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
JavaScript架構(gòu)前端監(jiān)控搭建過程步驟
這篇文章主要為大家介紹了JavaScript架構(gòu)前端監(jiān)控搭建過程步驟，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06