JavaScript實(shí)現(xiàn)文本目標(biāo)字符替換和一鍵全部替換
需求描述:
實(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)文章
uniApp獲取當(dāng)前位置經(jīng)緯度的示例代碼
這篇文章主要介紹了uniApp獲取當(dāng)前位置經(jīng)緯度,以下是使用uni.getLocation獲取當(dāng)前位置的示例代碼,需要的朋友可以參考下2024-01-01關(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-08JS實(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-10JavaScript架構(gòu)前端監(jiān)控搭建過程步驟
這篇文章主要為大家介紹了JavaScript架構(gòu)前端監(jiān)控搭建過程步驟,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-06-06