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="用來(lái)替換的內(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)文章

詳解如何webpack使用DllPlugin
這篇文章主要介紹了詳解如何webpack使用DllPlugin，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
HTML中setCapture、releaseCapture 使用方法淺析
本文給大家簡(jiǎn)單介紹了下html中的高級(jí)拖動(dòng)技術(shù)setCapture、releaseCapture的使用方法，有需要的小伙伴可以參考下
2016-09-09
javascript跨瀏覽器的屬性判斷方法
這篇文章主要介紹了javascript跨瀏覽器的屬性判斷的方法,需要的朋友可以參考下
2014-03-03
Javascript生成全局唯一標(biāo)識(shí)符（GUID,UUID）的方法
本文給大家匯總介紹了5種使用javascript實(shí)現(xiàn)全局唯一標(biāo)識(shí)符（GUID,UUID）的方法，非常的全面，有需要的小伙伴可以來(lái)參考下
2016-02-02
簡(jiǎn)單了解TypeScript中如何繼承 Error 類
這篇文章主要介紹了簡(jiǎn)單了解TypeScript中如何繼承 Error 類，一個(gè)典型的網(wǎng)站服務(wù)器可能需要有 NetworkError, DatabaseError, UnauthorizedError 等。我們希望這些類都擁有 Error 的特性：有錯(cuò)誤消息、有調(diào)用棧、有方便打印的 toString 等。,需要的朋友可以參考下
2019-06-06
JS函數(shù)基本定義與用法示例
這篇文章主要介紹了JS函數(shù)基本定義與用法,結(jié)合實(shí)例形式分析了JavaScript函數(shù)基本定義、參數(shù)、返回值等相關(guān)使用技巧,需要的朋友可以參考下
2020-01-01
JS實(shí)現(xiàn)簡(jiǎn)單移動(dòng)端鼠標(biāo)拖拽
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡(jiǎn)單移動(dòng)端鼠標(biāo)拖拽，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-07-07
在?localStorage?中上傳和檢索存儲(chǔ)圖像的示例詳解
這篇文章主要介紹了在?localStorage?中上傳和檢索存儲(chǔ)圖像,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-06-06
javascript firefox兼容ie的dom方法腳本
js firefox下兼容ie的dom的實(shí)現(xiàn)方法小結(jié)。利用我們?yōu)榱思嫒荻酁g覽器寫出更好的效果代碼
2008-05-05
javascript原生ajax寫法分享
本文通過(guò)2個(gè)示例來(lái)給大家分享了下原生javascript結(jié)合ajax實(shí)現(xiàn)數(shù)據(jù)請(qǐng)求的方法以及原理，非常的簡(jiǎn)單實(shí)用，有需要的小伙伴可以參考下
2016-04-04