前端字符串替換「js替換字符串制定位置字符」

1.把字符串中所有單詞的首字母都轉換為大寫:

var str = 'aaa bbb ccc';
uw=str.replace(/\b\w+\b/g, function(word){
  return word.substring(0,1).toUpperCase()+word.substring(1);}
  );
說明:匹配一次就執行一次函數,匹配的內容作為參數
function uppperCase(str) {  
    return str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase());  
}

2.把數字轉成對應的漢字

var ary=["一","二","三","四","五","六"]
"123456".replace(/\d/g,function(val){
  return ary[val-1]
})

3.實現模板字符替換』  

var obj = {
    name:'leaf',
    age:20
}
var str = "我是{{name}},name是我的名字,我今年{{age}}歲";
//最終替換成"我是leaf,name是我的名字,我今年20歲"
實現:
function render(template, context) {
  return template.replace(/{{(.*?)}}/g, (match, key) => context[key.trim()]);
}
function formateString(str,obj) {
    return str.replace(/{#(\w+)#}/g,function(match,key,index,source){
        console.log(arguments);
        return obj[key]
    })
}
var string='<div>{#content#}</div>';
formateString(string,{content:'helloWorld'});

4.顏色字符串轉換

將 rgb 顏色字符串轉換為十六進制的形式,如 rgb(255, 255, 255) 轉為 #ffffff\

  1. rgb 中每個 , 後面的空格數量不固定\
  2. 十六進制表達式使用六位小寫字母\
  3. 如果輸入不符合 rgb 格式,返回原始輸入
function rgb2hex(sRGB) {
    return sRGB.replace(/^rgb((\d+)\s*,\s*(\d+)\s*,\s*(\d+))$/g, (s, r, g, b) => {
        return `#${hex(r)}${hex(g)}${hex(b)}`
        })
}
function hex(n) {
    return n < 16 ? "0" + (+n).toString(16) : (+n).toString(16);
}

輸入:

'rgb(255, 255, 255)'

輸出:

#ffffff

  5.將字符串轉換為駝峰格式

css 中經常有類似 background-image 這種通過 – 連接的字符,通過 javascript 設置樣式的時候需要將這種樣式轉換成 backgroundImage 駝峰格式,請完成此轉換功能\

  1. 以 – 為分隔符,將第二個起的非空單詞首字母轉為大寫\
  2. -webkit-border-image 轉換後的結果為 webkitBorderImage
function cssStyle2DomStyle(sName) {
   return sName.replace(/-(.)/g, (s, v, k) => {
       if( k=== 0) {return v}
       return v.toUpperCase();
   })
}

輸入:

'font-size'

複製

輸出:

fontSize

其他常用正則替換 

//去除空格
String.prototype.Trim = function() {
return this.replace(/\s+/g, "");
}
  
//去除換行
function ClearBr(key) {
key = key.replace(/</?.+?>/g,"");
key = key.replace(/[\r\n]/g, "");
return key;
}
  
//去除左側空格
function LTrim(str) {
return str.replace(/^\s*/g,"");
}
  
//去右空格
function RTrim(str) {
return str.replace(/\s*$/g,"");
}
  
//去掉字符串兩端的空格
function trim(str) {
return str.replace(/(^\s*)|(\s*$)/g, "");
}
  
//去除字符串中間空格
function CTim(str) {
return str.replace(/\s/g,'');
}
  
//是否為由數字組成的字符串
function is_digitals(str) {
var reg=/^[0-9]*$/; //匹配整數
return reg.test(str);
}1.把字符串中所有單詞的首字母都轉換為大寫:
var str = 'aaa bbb ccc';
uw=str.replace(/\b\w+\b/g, function(word){
  return word.substring(0,1).toUpperCase()+word.substring(1);}
  );
說明:匹配一次就執行一次函數,匹配的內容作為參數
function uppperCase(str) {  
    return str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase());  
}
2.把數字轉成對應的漢字
var ary=["一","二","三","四","五","六"]
"123456".replace(/\d/g,function(val){
  return ary[val-1]
})
3.實現模板字符替換』  
var obj = {
    name:'leaf',
    age:20
}
var str = "我是{{name}},name是我的名字,我今年{{age}}歲";
//最終替換成"我是leaf,name是我的名字,我今年20歲"
實現:
function render(template, context) {
  return template.replace(/{{(.*?)}}/g, (match, key) => context[key.trim()]);
}
 

function formateString(str,obj) {
    return str.replace(/{#(\w+)#}/g,function(match,key,index,source){
        console.log(arguments);
        return obj[key]
    })
}
var string='<div>{#content#}</div>';
formateString(string,{content:'helloWorld'});
4.顏色字符串轉換
將 rgb 顏色字符串轉換為十六進制的形式,如 rgb(255, 255, 255) 轉為 #ffffff\

rgb 中每個 , 後面的空格數量不固定\
十六進制表達式使用六位小寫字母\
如果輸入不符合 rgb 格式,返回原始輸入
function rgb2hex(sRGB) {
    return sRGB.replace(/^rgb((\d+)\s*,\s*(\d+)\s*,\s*(\d+))$/g, (s, r, g, b) => {
        return `#${hex(r)}${hex(g)}${hex(b)}`
        })
}
function hex(n) {
    return n < 16 ? "0" + (+n).toString(16) : (+n).toString(16);
}
輸入:

'rgb(255, 255, 255)'
輸出:

#ffffff
 

  5.將字符串轉換為駝峰格式
css 中經常有類似 background-image 這種通過 - 連接的字符,通過 javascript 設置樣式的時候需要將這種樣式轉換成 backgroundImage 駝峰格式,請完成此轉換功能\

以 - 為分隔符,將第二個起的非空單詞首字母轉為大寫\
-webkit-border-image 轉換後的結果為 webkitBorderImage
function cssStyle2DomStyle(sName) {
   return sName.replace(/-(.)/g, (s, v, k) => {
       if( k=== 0) {return v}
       return v.toUpperCase();
   })
}
輸入:

'font-size'
複製

輸出:

fontSize
 

  

  

其他常用正則替換 
//去除空格
String.prototype.Trim = function() {
return this.replace(/\s+/g, "");
}
  
//去除換行
function ClearBr(key) {
key = key.replace(/</?.+?>/g,"");
key = key.replace(/[\r\n]/g, "");
return key;
}
  
//去除左側空格
function LTrim(str) {
return str.replace(/^\s*/g,"");
}
  
//去右空格
function RTrim(str) {
return str.replace(/\s*$/g,"");
}
  
//去掉字符串兩端的空格
function trim(str) {
return str.replace(/(^\s*)|(\s*$)/g, "");
}
  
//去除字符串中間空格
function CTim(str) {
return str.replace(/\s/g,'');
}
  
//是否為由數字組成的字符串
function is_digitals(str) {
var reg=/^[0-9]*$/; //匹配整數
return reg.test(str);
}

原創文章,作者:投稿專員,如若轉載,請註明出處:https://www.506064.com/zh-hk/n/272996.html

(0)
打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
投稿專員的頭像投稿專員
上一篇 2024-12-17 14:03
下一篇 2024-12-17 14:03

相關推薦

發表回復

登錄後才能評論