iis服务器助手广告广告
返回顶部
首页 > 资讯 > 精选 >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://www.lsjlt.com/news/338652.html(转载时请注明来源链接)

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

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript实现文本目标字符替换和一键全部替换
    需求描述: 实现在文本中替换目标字符,以及一键全部替换功能。 技术点: 利用string的replace实现替换第一个找到的目标字符。 replace(searchValue: st...
    99+
    2022-11-13
  • JavaScript如何实现文本目标字符替换和一键全部替换
    这篇文章主要介绍“JavaScript如何实现文本目标字符替换和一键全部替换”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“JavaScript如何实现文本目标字符替换和一键全部替换”文章能帮助大家解...
    99+
    2023-07-01
  • jQuery如何实现字符串全部替换
    这篇文章主要为大家展示了“jQuery如何实现字符串全部替换”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“jQuery如何实现字符串全部替换”这篇文章吧。大家都...
    99+
    2022-10-19
  • 如何使用Python来进行查询和替换一个文本字符串
    这篇文章主要介绍如何使用Python来进行查询和替换一个文本字符串,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!如何用 Python 来进行查询和替换一个文本字符串?答:可以使用 r...
    99+
    2022-10-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作