JS替换字符串中指定位置的字符(多种方法)


Posted in Javascript onMay 28, 2020

假设有一个字符串,可能'Good Morning'也可能是'Hello World',我想将第五个字符,替换成'-'
因为字符串虽然可以像数组那样获取某一位置字符'Hello World'[4],但是不能像数组那样直接修改某一位置的字符'Hello World'[4] = '-',这样是行不通的,但是可以把它切分成数组,修改某一位置的值,然后在合并回来。
方法1:

const replaceStr1 = (str, index, char) => {
 const strAry = str.split('');
 strAry[index] = char;
 return strAry.join('');
 }
 replaceStr(str1, 4, '-'); // => Good-Morning
 replaceStr(str2, 4, '-'); // => Hell- World

js的字符串有个substring方法,用于提取字符串中介于两个指定下标之间的字符,也就是说可以用'Hello World'.substring(0, 4),得到Hell,加上要替换的字符,再加上后面的字符串就可以。
方法2:

const replaceStr2 = (str, index, char) => {
 return str.substring(0, index) + char + str.substring(index + 1);
 }
 replaceStr2(str1, 4, '-'); // => Good-Morning
 replaceStr2(str2, 4, '-'); // => Hell- World

ps:下面看下js替换字符串中所有指定的字符

第一次发现JavaScript中replace()方法如果直接用str.replace("-","!")只会替换第一个匹配的字符.
str.replace(/\-/g,"!")则可以全部替换掉匹配的字符(g为全局标志)。

replace()
Thereplace()methodreturnsthestringthatresultswhenyoureplacetextmatchingitsfirstargument
(aregularexpression)withthetextofthesecondargument(astring).
Iftheg(global)flagisnotsetintheregularexpressiondeclaration,thismethodreplacesonlythefirst
occurrenceofthepattern.Forexample,

vars="Hello.Regexpsarefun.";s=s.replace(/\./,"!");//replacefirstperiodwithanexclamationpointalert(s);

producesthestring“Hello!Regexpsarefun.”Includingthegflagwillcausetheinterpreterto
performaglobalreplace,findingandreplacingeverymatchingsubstring.Forexample,

vars="Hello.Regexpsarefun.";s=s.replace(/\./g,"!");//replaceallperiodswithexclamationpointsalert(s);

yieldsthisresult:“Hello!Regexpsarefun!”

所以可以用以下几种方式.:

string.replace(/reallyDo/g,replaceWith);
string.replace(newRegExp(reallyDo,'g'),replaceWith);

string:字符串表达式包含要替代的子字符串。
reallyDo:被搜索的子字符串。
replaceWith:用于替换的子字符串。

Js代码

<script type="text/javascript"> 
String.prototype.replaceAll = function(reallyDo, replaceWith, ignoreCase) { 
  if (!RegExp.prototype.isPrototypeOf(reallyDo)) { 
    return this.replace(new RegExp(reallyDo, (ignoreCase ? "gi": "g")), replaceWith); 
  } else { 
    return this.replace(reallyDo, replaceWith); 
  } 
} 
</script>

总结

到此这篇关于JS替换字符串中指定位置的字符的文章就介绍到这了,更多相关js替换字符内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
使用jquery实现IE下按backspace相当于返回操作
Mar 18 Javascript
JavaScript事件委托用法分析
Jan 24 Javascript
JavaScript页面模板库handlebars的简单用法
Mar 02 Javascript
全面了解addEventListener和on的区别
Jul 14 Javascript
vue.js绑定class和style样式(6)
Dec 09 Javascript
JavaScript实现简单的双色球(实例讲解)
Jul 31 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
详解如何在nuxt中添加proxyTable代理
Aug 10 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
Oct 29 Javascript
微信小程序实现多选框全选与取消全选功能示例
May 14 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
Dec 10 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
Jan 21 Javascript
js实现九宫格布局效果
May 28 #Javascript
微信小程序实现电子签名并导出图片
May 27 #Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
May 27 #Javascript
微信公众号网页分享功能开发的示例代码
May 27 #Javascript
JS字符串补全方法padStart()和padEnd()
May 27 #Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
May 27 #Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
May 27 #Javascript
You might like
谷歌音乐搜索栏的提示功能php修正代码
2011/05/09 PHP
php使用百度翻译api示例分享
2014/01/31 PHP
php求两个目录的相对路径示例(php获取相对路径)
2014/03/27 PHP
完美解决thinkphp验证码出错无法显示的方法
2014/12/09 PHP
PHP技术开发微信公众平台
2015/07/22 PHP
PDO的安全处理与事物处理方法
2016/10/31 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
代码精简的可以实现元素圆角的js函数
2007/07/21 Javascript
Javascript 实现TreeView CheckBox全选效果
2010/01/11 Javascript
jquery.lazyload  实现图片延迟加载jquery插件
2010/02/06 Javascript
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
2012/12/17 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
2015/08/24 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
2016/06/21 Javascript
Angular 页面跳转时传参问题
2016/08/01 Javascript
十大热门的JavaScript框架和库
2017/03/21 Javascript
VUE axios上传图片到七牛的实例代码
2017/07/28 Javascript
Vue DevTools调试工具的使用
2017/12/05 Javascript
Vue源码解析之数组变异的实现
2018/12/04 Javascript
vue cli 3.x 项目部署到 github pages的方法
2019/04/17 Javascript
微信小程序实现签字功能
2019/12/23 Javascript
Vue事件处理原理及过程详解
2020/03/11 Javascript
用Python设计一个经典小游戏
2017/05/15 Python
Redis使用watch完成秒杀抢购功能的代码
2018/05/07 Python
对python中使用requests模块参数编码的不同处理方法
2018/05/18 Python
Selenium(Python web测试工具)基本用法详解
2018/08/10 Python
Python设计模式之原型模式实例详解
2019/01/18 Python
详解python编译器和解释器的区别
2019/06/24 Python
python中PS 图像调整算法原理之亮度调整
2019/06/28 Python
详解python 破解网站反爬虫的两种简单方法
2020/02/09 Python
python3实现名片管理系统(控制台版)
2020/11/29 Python
python安装及变量名介绍详解
2020/12/12 Python
美国杰西潘尼官网:JCPenney
2019/06/12 全球购物
成绩单公证书
2014/04/10 职场文书
服务员岗位职责
2015/02/03 职场文书
CSS 制作波浪效果的思路
2021/05/18 HTML / CSS
Python中Numpy和Matplotlib的基本使用指南
2021/11/02 Python