Research on the replace method from js string to camel case to string

In the project, because the attribute names returned by different systems are different, it is often troublesome to take different values ​​when judging, so the name is directly converted to camel case for unified and compatible processing. (Note: A separator is required here, even if it is a space, an underscore or a dash)

1. The simplest:

Using the camelCase() method of the lodash library

import {camelCase} from lodash;

const str = 'get-element-by-id';
console.log(camelCase(str));  // 输出 getElementById

2. Custom tool function method:

   const str = 'get-element-by-id'
    
   function changeToCamp(str){
    //把每个-与后面的第一个字母匹配出来，利用replace转成大写
    const reg = /-\w/g;
    return str.replace(reg,value=>value[1].toUpperCase())
   }
   console.log(changeToCamp(str));  // 输出 getElementById

Start here to learn about the replace method for strings.

String replace method:

1. The replace method will not change the original string

2. Grammar:str.replace(regexp|substr, newSubStr|function)

The first parameter: 1) It can be a string directly, indicating the part of the original string that needs to be replaced;

                       2) It can also be a regular expression, matching the part that needs to be replaced

Regular expressions are patterns used to match combinations of characters in strings . In JavaScript, regular expressions are objects .

The second parameter: 1) can be a string

                       2) It can also be a callback function that is called every time a match is made. In this case, when the match is performed,

                             The function will be executed. The return value of the function as a replacement string . Also note that if the first

                             One parameter is a regular expression, and it is a global matching pattern, then this method will be called multiple times,

                             will be called for every match .
The parameters of this function are as follows: 

 Visual example:

Example 1:

        示例1：
        const str = 'abcc 1212';
        const reg = /([a-c]+)\s*(\d+)/g;
        console.log(str.replace(reg, ($0, $1, $2, $3) => {
          console.log('输出0为：',$0);
          console.log('输出1为：',$1);
          console.log('输出2为：',$2);
          console.log('输出3为：',$3);
          return $2 + $1;
        }));
        // $0 = str,即正则表达式reg匹配的子串。
        // $1 = abcc,是([a-c]+)匹配的子串。
        // $2 = 1212,是(\d+)匹配的子串。
        // $3 = 0,是正则表达式reg匹配的子串的第一个元素对应的下标。

Output: (only matched once)

Example 2: 

    示例2：
    const str3 = 'get-element-by-id';
    const reg3 = /-(\w)/g;
    console.log(str3.replace(reg3, ($0, $1, $2, $3, $4) => {
    console.log('输出0为：',$0)
      console.log('输出1为：',$1)
      console.log('输出2为：',$2)
      console.log('输出3为：',$3)
      console.log('输出4为：',$4)
        
      return $2 + $1;
    }));

Output: (Matched three times)

Use different combinations of replace:

1-1. String + string combination: the simplest

A string to be replaced by newSubStr. It is treated as a whole string, not a regular expression. Only the first occurrence will be replaced.

    const str = 'abcc 1212&';
    console.log(str.replace('12', '$')); // abcc $12&

1-2. The combination of string + callback function has not found a usage scenario for this combination

2-1. Combination of regex + string (cannot realize camel case)

    const str = 'we-are-family';
    const reg = /-(\w)/g;
    console.log(str.replace(reg, '替换')); // 输出 we替换re替换amily

2-2. Combination of regex + callback function (can realize hump conversion)

    const str = 'get-element-by-id';
    // 这两种其实是一样的,只不过方法一取的是(\w)匹配的任意字母数字或下划线, 方法二直接取的匹配的-加字母进行处理的
    // 方法一
    function cssStyle2DomStyle(sName) {
        let s = sName;
        // 处理特殊情况，如果一上来就有-的话： -www
        if (s && s[0] === '-') s = s.substring(1);
        return s.replace(/-(\w)/g, function(_,c,d,e){
           return c ? c.toUpperCase() : ''   
     })
    }
    console.log(cssStyle2DomStyle(str));  // 输出 getlementById

   // 方法二
   function changeToCamp(str){
       //把每个-与后面的第一个字母匹配出来，利用replace转成大写
       const reg = /-\w/g
       return str.replace(reg,value => value[1].toUpperCase())
   }
   console.log(changeToCamp(str));  // 输出 getlementById

For details, please refer to MDN: String.prototype.replace() - JavaScript | MDN