返回顶部
首页 > 资讯 > 精选 >JavaScript如何实现文本目标字符替换和一键全部替换
  • 395
分享到

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

2023-07-01 23:07:25 395人浏览 安东尼
摘要

这篇文章主要介绍“javascript如何实现文本目标字符替换和一键全部替换”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“JavaScript如何实现文本目标字符替换和一键全部替换”文章能帮助大家解

这篇文章主要介绍“javascript如何实现文本目标字符替换和一键全部替换”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“JavaScript如何实现文本目标字符替换和一键全部替换”文章能帮助大家解决问题。

需求描述:

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

技术点:

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

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

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

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

完整demo示例:

效果图:

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

完整代码:

<!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如何实现文本目标字符替换和一键全部替换”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注编程网精选频道,小编每天都会为大家更新不同的知识点。

--结束END--

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

本文链接: https://lsjlt.com/news/338652.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
  • javascript中如何实现字符串替换星号
    这篇文章给大家分享的是有关javascript中如何实现字符串替换星号的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 javascript实现字符串替...
    99+
    2024-04-02
  • shell如何实现字符串替换
    小编给大家分享一下shell如何实现字符串替换,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!字符串替换${string//pat...
    99+
    2024-04-02
  • linux如何替换文本中的字符串
    在Linux中,可以使用`sed`命令来替换文本中的字符串。`sed`命令的基本语法如下:```sed 's/要替换的字符串...
    99+
    2023-10-08
    linux
  • JavaScript如何替换所有出现的字符串
    这篇文章主要为大家展示了“JavaScript如何替换所有出现的字符串”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript如何替换所有出现的字符串”这篇文章吧。如何替换所有出现的字...
    99+
    2023-06-27
  • C语言如何实现字符串替换
    在C语言中可以通过循环遍历字符串的每个字符,然后判断是否需要替换,如果需要替换则使用新的字符替换原字符。下面是一个示例代码,实现了字...
    99+
    2023-08-24
    C语言
  • php字符串查找最后一个字符如何实现替换
    今天小编给大家分享一下php字符串查找最后一个字符如何实现替换的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。一、PHP 查找...
    99+
    2023-07-05
  • MySQL全局遍历替换特征字符串如何实现
    这篇“MySQL全局遍历替换特征字符串如何实现”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“MySQL全局遍历替换特征字符串...
    99+
    2023-07-05
  • mysql如何实现替换字段部分内容
    这篇文章将为大家详细讲解有关mysql如何实现替换字段部分内容,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。[mysql]replace的用法1.replace...
    99+
    2024-04-02
  • 如何使用Python来进行查询和替换一个文本字符串
    这篇文章主要介绍如何使用Python来进行查询和替换一个文本字符串,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!如何用 Python 来进行查询和替换一个文本字符串?答:可以使用 r...
    99+
    2024-04-02
  • JavaScript基于扩展String如何实现替换字符串中index处字符
    小编给大家分享一下JavaScript基于扩展String如何实现替换字符串中index处字符,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去...
    99+
    2024-04-02
  • 使用PHP的substr_replace()函数替换字符串中的一部分文本
    PHP的substr_replace()函数是一种非常实用的函数,可以在一个字符串中替换指定位置的一部分文本。这个函数非常灵活,可以用于处理各种文本操作,下面我将给出一些具体的代码示例。首先,我们来看一个简单的示例,将字符串中的某个区域替换...
    99+
    2023-11-03
    PHP 替换 substr_replace
  • Java如何替换第一个和最后一个字符串
    Java替换第一个和最后一个字符串 1、测试类 package com.jeff.json; import com.alibaba.fastjson.JSONObject; pu...
    99+
    2024-04-02
  • php如何实现数组批量替换字符串
    这篇文章主要介绍“php如何实现数组批量替换字符串”,在日常操作中,相信很多人在php如何实现数组批量替换字符串问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”php如何实现数组批量替换字符串”的疑惑有所帮助!...
    99+
    2023-07-06
  • nodejs如何使用正则实现字符串替换
    今天小编给大家分享一下nodejs如何使用正则实现字符串替换的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。正则表达式的基本语...
    99+
    2023-07-05
  • Linux中Docker镜像如何实现文本替换
    这篇文章主要介绍了Linux中Docker镜像如何实现文本替换,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。文本替换文本替换是 sed 命令擅长的事,下面...
    99+
    2023-06-27
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作