JavaScript实现文本目标字符替换和一键全部替换
更新时间：2022年06月07日 11:09:22 作者： 灵扁扁
这篇文章主要介绍了JavaScript实现文本目标字符替换和一键全部替换，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
需求描述:
实现在文本中替换目标字符，以及一键全部替换功能。
技术点:
利用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文本替换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
JS操作二进制很麻烦，而且一直没有一个好的无损压缩工具来实现纯文本的压缩。2010-04-04
这篇文章主要为大家详细介绍了js仿3366小游戏选字游戏2016-04-04
这篇文章主要介绍了uniApp获取当前位置经纬度,以下是使用uni.getLocation获取当前位置的示例代码,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了使用jquery解析XML的方法,代码简洁实用,需要的朋友可以参考下2014-09-09
下面小编就为大家带来一篇关于动态执行代码(js的Eval)实例详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
我写JavaScript代码已经很久了，都记不起是什么年代开始的了。本文给大家分享javascript七大技巧(二)，对javascript技巧相关知识感兴趣的朋友一起学习吧2015-12-12
js实现表单验证功能，通过js代码验证手机号是否存在验证码倒计时功能，代码简单易懂非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧2016-10-10
Cookie就是这样的一种机制。它可以弥补HTTP协议无状态的不足。在Session出现之前，基本上所有的网站都采用Cookie来跟踪会话。下面通过本文给大家介绍JS中cookie的使用及缺点，需要的朋友参考下吧2017-05-05
这篇文章主要介绍了js中延迟加载和预加载的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
这篇文章主要为大家介绍了JavaScript架构前端监控搭建过程步骤，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
最新评论