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文本替换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
在项目开发中遇到这样的需求，扫描二维码打开app如果用户没有这个app则提示它跳转，怎么实现呢？下面小编给大家分享通过扫描二维码打开app的实现代码，感兴趣的朋友参考下吧2016-11-11
详解ES6 export default 和 import语句中的解构赋值
这篇文章主要介绍了详解ES6 export default 和 import语句中的解构赋值，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
这篇文章主要介绍了微信小程序block的使用 ,微信小程序最近非常火热，实现起来也很简单，只要block就可以实现，需要的朋友可以参考下2018-04-04
如何用js控制frame的隐藏或显示的解决办法，需要的朋友可以参考一下2013-03-03
这篇文章主要为大家详细介绍了JS实现简单的九宫格抽奖，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
这篇文章主要介绍了微信小程序提交form操作,结合实例形式分析了微信小程序开发中使用form组件实现数据提交与数据处理相关操作技巧,需要的朋友可以参考下2018-12-12
本篇文章主要介绍了JS异步加载的三种实现方式，有些时候我们需要JS异步加载，这里整理了详细的代码,有需要的小伙伴可以参考下。2017-03-03
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
下面小编就为大家带来一篇js对象实例详解(JavaScript对象深度剖析,深度理解js对象)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要带领大家学习JavaScript鼠标响应事件，为大家分享了一个简单的鼠标模拟案例，感兴趣的小伙伴们可以参考一下2015-12-12
这篇文章主要介绍了JS实现10进制转换36进制，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
最新评论