Javascript CamelCase для обычной формы - PullRequest
146 голосов
/ 11 ноября 2010

Я пытался заставить команду JavaScript regex превратить что-то вроде thisString в This String, но самое близкое, что я получил, это замена буквы, в результате чего получилось что-то вроде Thi String или This tring.Любые идеи?

Чтобы прояснить, я могу справиться с простотой использования заглавной буквы, я просто не так силен с RegEx, и разделение somethingLikeThis на something Like This - вот где у меня проблемы.

Ответы [ 11 ]

340 голосов
/ 11 ноября 2010
"thisStringIsGood"
    // insert a space before all caps
    .replace(/([A-Z])/g, ' $1')
    // uppercase the first character
    .replace(/^./, function(str){ return str.toUpperCase(); })

отображает

This String Is Good

(function() {

  var $textbox = $('#textbox'),
    $result = $('#result'),
    splitter = function() {
      $result.html($textbox.val()
        // insert a space before all caps
        .replace(/([A-Z])/g, ' $1')
        // uppercase the first character
        .replace(/^./, function(str) {
          return str.toUpperCase();
        }));
    };

  $textbox.on('input', splitter);
  
  splitter();
}());
#result {
  margin-top: 10px;
  padding-top: 10px;
  border-top: solid 1px #c3c3c3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

<div id="result"></div>
81 голосов
/ 03 июня 2011

У меня был бесполезный интерес к этому, особенно в обработке последовательностей заглавных букв, таких как xmlHTTPRequest.Перечисленные функции будут генерировать «XML-запрос XML» или «HTTP-запрос XML», мой - «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(); })
}

В сущности также есть версия String.prototype .

20 голосов
/ 11 ноября 2010

Это можно сделать кратко, используя regex lookahead ( live demo ):

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

(я думал, что флаг g (global) был необходим, но, как ни странно,это не в данном конкретном случае.)

Использование упреждения с split гарантирует, что совпавшая заглавная буква не будет использована, и избегает использования начального пробела, если UpperCamelCase - это то, с чем вам нужно иметь дело.Чтобы использовать заглавные буквы первой буквы, вы можете использовать:

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

Метод массива map является функцией ES5, но вы все равно можете использовать его в старых браузерах с некоторым кодом из MDC .Кроме того, вы можете перебирать элементы массива, используя цикл for.

15 голосов
/ 09 сентября 2014

Я думаю, что это должно быть в состоянии обрабатывать последовательные заглавные буквы, а также простой camelCase.

Например: someVariable => someVariable, но ABCCode! = ABC Code.

Приведенное ниже регулярное выражение работает на вашем примере, но также является распространенным примером представления аббревиатур в 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"

Вы также можете отрегулировать, как указано выше, чтобы использовать заглавные буквы для первого символа.

8 голосов
/ 11 ноября 2010
function spacecamel(s){
    return s.replace(/([a-z])([A-Z])/g, '$1 $2');
}

spacecamel ('thingLikeThis ')

// возвращаемое значение: что-то вроде этого

5 голосов
/ 28 марта 2018

Lodash прекрасно справляется с _.startCase()

4 голосов
/ 22 июня 2012

Решение, которое также обрабатывает числа:

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 + ' ';
          }
       )
   }

Проверено здесь [JSFiddle, нет библиотеки. Не пробовал IE];должно быть довольно стабильным.

0 голосов
/ 10 мая 2019

Попробуйте это решение здесь -

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;
0 голосов
/ 18 февраля 2019

Моя версия

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"
0 голосов
/ 19 апреля 2013

Если вы не заботитесь о старых браузерах (или не возражаете против использования для них резервной функции уменьшение ), это может разделить даже строки, такие как 'xmlHTTPRequest' (но, конечно, подобные '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(' ');
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...