Làm thế nào để chuyển đổi camelCase Hướng tới trường hợp Camel Camel?

Tôi đã cố gắng để có được một lệnh regex JavaScript để biến một cái gì đó "thisString"thành "This String"nhưng thứ gần nhất tôi nhận được là thay thế một chữ cái, dẫn đến một cái gì đó giống như "Thi String"hoặc "This tring". Có ý kiến ​​gì không?

Để làm rõ, tôi có thể xử lý sự đơn giản của việc viết hoa một chữ cái, tôi không mạnh bằng RegEx và chia tách "somethingLikeThis"thành "something Like This"nơi tôi gặp khó khăn.

"thisStringIsGood"
    // insert a space before all caps
    .replace(/([A-Z])/g, ' $1')
    // uppercase the first character
    .replace(/^./, function(str){ return str.toUpperCase(); })

màn hình

This String Is Good

(function() {

  const textbox = document.querySelector('#textbox')
  const result = document.querySelector('#result')
  function split() {
      result.innerText = textbox.value
        // insert a space before all caps
        .replace(/([A-Z])/g, ' $1')
        // uppercase the first character
        .replace(/^./, (str) => str.toUpperCase())
    };

  textbox.addEventListener('input', split);
  split();
}());

#result {
  margin-top: 1em;
  padding: .5em;
  background: #eee;
  white-space: pre;
}

<div>
  Text to split
  <input id="textbox" value="thisStringIsGood" />
</div>

<div id="result"></div>

Tôi có một mối quan tâm nhàn rỗi trong việc này, đặc biệt là trong việc xử lý các chuỗi thủ đô, chẳng hạn như trong xmlHTTPRequest. Các chức năng được liệt kê sẽ tạo ra "Yêu cầu HTTP Xml" hoặc "Xml HTTPRequest", của tôi tạo ra "Yêu cầu HTTP Xml".

function unCamelCase (str){
    return str
        // insert a space between lower & upper
        .replace(/([a-z])([A-Z])/g, '$1 $2')
        // space before last upper in a sequence followed by lower
        .replace(/\b([A-Z]+)([A-Z])([a-z])/, '$1 $2$3')
        // uppercase the first character
        .replace(/^./, function(str){ return str.toUpperCase(); })
}

Ngoài ra còn có phiên bản String.prototype trong một ý chính .

Điều này có thể được thực hiện chính xác với regex lookahead ( bản demo trực tiếp ):

function splitCamelCaseToString(s) {
    return s.split(/(?=[A-Z])/).join(' ');
}

(Tôi nghĩ rằng gcờ (toàn cầu) là cần thiết, nhưng thật kỳ lạ, nó không nằm trong trường hợp cụ thể này.)

Sử dụng lookahead với splitđảm bảo rằng chữ in hoa trùng khớp không bị tiêu thụ và tránh giao dịch với không gian hàng đầu nếu UpperCamelCase là thứ bạn cần xử lý. Để viết hoa chữ cái đầu tiên của mỗi chữ cái, bạn có thể sử dụng:

function splitCamelCaseToString(s) {
    return s.split(/(?=[A-Z])/).map(function(p) {
        return p.charAt(0).toUpperCase() + p.slice(1);
    }).join(' ');
}

Các mapphương pháp mảng là một tính năng ES5, nhưng bạn vẫn có thể sử dụng nó trong các trình duyệt cũ với một số mã từ MDC . Ngoài ra, bạn có thể lặp qua các phần tử mảng bằng forvòng lặp.

Tôi nghĩ rằng điều này sẽ có thể xử lý các ký tự viết hoa liên tiếp cũng như camelCase đơn giản.

Ví dụ: someVariable => someVariable, nhưng ABCCode! = ABC Code.

Regex dưới đây hoạt động trên ví dụ của bạn nhưng cũng là ví dụ phổ biến về cách viết tắt trong camcelCase.

"somethingLikeThis"
    .replace(/([a-z])([A-Z])/g, '$1 $2')
    .replace(/([A-Z])([a-z])/g, ' $1$2')
    .replace(/\ +/g, ' ') => "something Like This"

"someVariableWithABCCode"
    .replace(/([a-z])([A-Z])/g, '$1 $2')
    .replace(/([A-Z])([a-z])/g, ' $1$2')
    .replace(/\ +/g, ' ') => "some Variable With ABC Code"

Bạn cũng có thể điều chỉnh như trên để viết hoa ký tự đầu tiên.

function spacecamel(s){
    return s.replace(/([a-z])([A-Z])/g, '$1 $2');
}

spacecamel ('SomethingLike This')

// giá trị trả về: một cái gì đó như thế này

Lodash xử lý việc này độc đáo với_.startCase()

Một giải pháp xử lý số là tốt:

function capSplit(str){
   return str.replace
      ( /(^[a-z]+)|[0-9]+|[A-Z][a-z]+|[A-Z]+(?=[A-Z][a-z]|[0-9])/g
      , function(match, first){
          if (first) match = match[0].toUpperCase() + match.substr(1);
          return match + ' ';
          }
       )
   }

Đã thử nghiệm ở đây [JSFiddle, không có thư viện. Chưa dùng thử IE]; nên khá ổn định.

Nếu bạn không quan tâm đến các trình duyệt cũ hơn (hoặc không quan tâm đến việc sử dụng chức năng giảm dự phòng cho chúng), điều này có thể phân chia các chuỗi chẵn như 'xmlHTTPRequest' (nhưng chắc chắn là không thể thích 'XMLHTTPRequest').

function splitCamelCase(str) {
        return str.split(/(?=[A-Z])/)
                  .reduce(function(p, c, i) {
                    if (c.length === 1) {
                        if (i === 0) {
                            p.push(c);
                        } else {
                            var last = p.pop(), ending = last.slice(-1);
                            if (ending === ending.toLowerCase()) {
                                p.push(last);
                                p.push(c);
                            } else {
                                p.push(last + c);
                            }
                        }
                    } else {
                        p.push(c.charAt(0).toUpperCase() + c.slice(1));
                    }
                    return p;
                  }, [])
                  .join(' ');
}

Phiên bản của tôi

function camelToSpace (txt) {
  return txt
    .replace(/([^A-Z]*)([A-Z]*)([A-Z])([^A-Z]*)/g, '$1 $2 $3$4')
    .replace(/ +/g, ' ')
}
camelToSpace("camelToSpaceWithTLAStuff") //=> "camel To Space With TLA Stuff"

Hãy thử giải pháp này tại đây -

var value = "myCamelCaseText";
var newStr = '';
for (var i = 0; i < value.length; i++) {
  if (value.charAt(i) === value.charAt(i).toUpperCase()) {
    newStr = newStr + ' ' + value.charAt(i)
  } else {
    (i == 0) ? (newStr += value.charAt(i).toUpperCase()) : (newStr += value.charAt(i));
  }
}
return newStr;

Không phải regex, nhưng hữu ích để biết các kỹ thuật đơn giản và cũ như thế này:

var origString = "thisString";
var newString = origString.charAt(0).toUpperCase() + origString.substring(1);