返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript实现文本目标字符替换和一键全部替换
  • 643
分享到

JavaScript实现文本目标字符替换和一键全部替换

2024-04-02 19:04:59 643人浏览 八月长安
摘要

需求描述: 实现在文本中替换目标字符,以及一键全部替换功能。 技术点: 利用string的replace实现替换第一个找到的目标字符。 replace(searchValue: st

需求描述:

实现在文本中替换目标字符,以及一键全部替换功能。

技术点:

利用string的replace实现替换第一个找到的目标字符。

replace(searchValue: string | RegExp, replaceValue: string): string;

利用string的replaceAll实现一键替换全部找到的目标字符。

replace(searchValue: string | RegExp, replacer: (substring: string, ...args: any[]) => string): string;

完整demo示例:

效果图:

完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js实现文本字符替换全部替换</title>
</head>
<body>

<textarea name="textarea" id="text" rows="10" cols="50">标准测试技术,红糖标准,酸奶标准,浏览器运行标准。</textarea>
<div>
  查找<input
    id="oldVal"
    placeholder="要查找的内容"
    value="">
  替换<input id="newVal" placeholder="用来替换的内容">
  <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)
  }
  // 将替换后的内容,更新到文档上
  document.getElementById('text').value = newText
}
</script>
</body>
</html>

到此这篇关于JavaScript实现文本目标字符替换和一键全部替换的文章就介绍到这了,更多相关js文本替换内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: JavaScript实现文本目标字符替换和一键全部替换

本文链接: https://lsjlt.com/news/150740.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JavaScript实现文本目标字符替换和一键全部替换
    需求描述: 实现在文本中替换目标字符,以及一键全部替换功能。 技术点: 利用string的replace实现替换第一个找到的目标字符。 replace(searchValue: st...
    99+
    2024-04-02
  • JavaScript如何实现文本目标字符替换和一键全部替换
    这篇文章主要介绍“JavaScript如何实现文本目标字符替换和一键全部替换”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“JavaScript如何实现文本目标字符替换和一键全部替换”文章能帮助大家解...
    99+
    2023-07-01
  • JavaScript如何实现全部替换
    这篇文章将为大家详细讲解有关JavaScript如何实现全部替换,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。全部替换我们知道 string.replace() 函数仅替换第一次出现的情况。你可以通过在正...
    99+
    2023-06-27
  • jQuery如何实现字符串全部替换
    这篇文章主要为大家展示了“jQuery如何实现字符串全部替换”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“jQuery如何实现字符串全部替换”这篇文章吧。大家都...
    99+
    2024-04-02
  • javascript如何把指定字符串全部替换
    这篇文章主要讲解了“javascript如何把指定字符串全部替换”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“javascript如何把指定字符串全部替换”...
    99+
    2024-04-02
  • Shell命令中的特殊替换、模式匹配替换、字符串提取和替换的实现
    目录特殊替换模式匹配替换字符串提取和替换形式说明${var}变量本来的值${var:-word}如果变量 var 为空或已被删除(unset),那么返回 word,但不改变 var 的值。${var:=word}如果变量...
    99+
    2022-06-05
    Shell 特殊替换 Shell模式匹配替换 Shell字符串替换
  • javascript中如何实现字符串替换星号
    这篇文章给大家分享的是有关javascript中如何实现字符串替换星号的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 javascript实现字符串替...
    99+
    2024-04-02
  • 使用PHP的substr_replace()函数替换字符串中的一部分文本
    PHP的substr_replace()函数是一种非常实用的函数,可以在一个字符串中替换指定位置的一部分文本。这个函数非常灵活,可以用于处理各种文本操作,下面我将给出一些具体的代码示例。首先,我们来看一个简单的示例,将字符串中的某个区域替换...
    99+
    2023-11-03
    PHP 替换 substr_replace
  • shell脚本实现字符串的动态替换方法
    目录背景代码使用示例用shell实现某行字符串的替换背景 我们有时候需要完成字符串的多组替换,比如需要完成以下替换 将“小草”替换为“真是让人印象深刻”将“小狗...
    99+
    2024-04-02
  • php字符串查找最后一个字符如何实现替换
    今天小编给大家分享一下php字符串查找最后一个字符如何实现替换的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。一、PHP 查找...
    99+
    2023-07-05
  • C++中怎么实现一个字符串替换函数
    这篇文章将为大家详细讲解有关C++中怎么实现一个字符串替换函数,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。C++字符串替换函数代码如下:@brief 实现字符串替换 &...
    99+
    2023-06-17
  • MySQL全局遍历替换特征字符串如何实现
    这篇“MySQL全局遍历替换特征字符串如何实现”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“MySQL全局遍历替换特征字符串...
    99+
    2023-07-05
  • 如何使用Python来进行查询和替换一个文本字符串
    这篇文章主要介绍如何使用Python来进行查询和替换一个文本字符串,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!如何用 Python 来进行查询和替换一个文本字符串?答:可以使用 r...
    99+
    2024-04-02
  • Java实现替换Word中文本和图片功能
    目录前言1.指定字符串内容替换文本2.获取文档内容替换文本3.图片替换文本4.图片替换图片前言 Word中的替换功能以查找指定文本然后替换为新的文本,可单个替换或全部替换。以下将要介...
    99+
    2024-04-02
  • JavaScript基于扩展String如何实现替换字符串中index处字符
    小编给大家分享一下JavaScript基于扩展String如何实现替换字符串中index处字符,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去...
    99+
    2024-04-02
  • MySQL全局遍历替换特征字符串的实现方法
    目录1. 确定替换规则2. 找出实例中所有符合特征的库表字段3. 对上一步每个库表字段,查询n条特征数据,用以人工采样确认4. 更新特征域名数据需求:将一个mysql实例(如10.10.10.1:3306)范围内所有字段...
    99+
    2023-03-24
    MySQL全局遍历替换特征字符串 MySQL 替换特征字符串
  • PHP技巧:利用PHP编程实现文本标点符号的替换功能
    在进行文本处理时,常常会遇到需要替换标点符号的情况。借助PHP编程,我们可以轻松实现这一功能。下面将介绍如何利用PHP编写代码,实现文本中标点符号的替换。 首先,我们需要明确需要替换的...
    99+
    2024-04-02
  • 如何实现替换一个字段的所有非数字字符为空
    这篇文章主要介绍“如何实现替换一个字段的所有非数字字符为空”,在日常操作中,相信很多人在如何实现替换一个字段的所有非数字字符为空问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”...
    99+
    2024-04-02
  • Java如何实现替换Word中文本和图片功能
    这篇文章主要讲解了“Java如何实现替换Word中文本和图片功能”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Java如何实现替换Word中文本和图片功能”吧!前言Word中的替换功能以查找...
    99+
    2023-06-30
  • PHP实战:使用PHP编写脚本快速替换文本中的标点符号
    PHP实战:使用PHP编写脚本快速替换文本中的标点符号 在处理文本数据时,经常需要清除或替换文本中的标点符号,以便进行后续的分析或处理。在PHP中,我们可以利用内置的字符串函数和正则表...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作