Convertir cadena a título de caso con JavaScript

¿Hay una manera simple de convertir una cadena a mayúscula? Por ejemplo, se john smithconvierte John Smith. No estoy buscando algo complicado como la solución de John Resig , solo (con suerte) algún tipo de una o dos líneas.

Prueba esto:

    function toTitleCase(str) {
        return str.replace(
            /\w\S*/g,
            function(txt) {
                return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
            }
        );
    }

<form>
Input:
<br /><textarea name="input" onchange="form.output.value=toTitleCase(this.value)"  onkeyup="form.output.value=toTitleCase(this.value)"></textarea>
<br />Output:
<br /><textarea name="output" readonly onclick="select(this)"></textarea>
</form>

Una forma un poco más elegante, adaptando la función de Greg Dean:

String.prototype.toProperCase = function () {
    return this.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
};

Llámalo como:

"pascal".toProperCase();

Intente aplicar el estilo CSS de transformación de texto a sus controles.

p.ej: (text-transform: capitalize);

Solo use un enfoque JS cuando sea absolutamente necesario.

Aquí está mi versión, IMO también es fácil de entender y elegante.

var str = "foo bar baz"

console.log(

str.split(' ')
   .map(w => w[0].toUpperCase() + w.substr(1).toLowerCase())
   .join(' ')

)
// returns "Foo Bar Baz"

Aquí está mi función que se convierte en mayúsculas y minúsculas, pero también conserva los acrónimos definidos como mayúsculas y las palabras menores como minúsculas:

String.prototype.toTitleCase = function() {
  var i, j, str, lowers, uppers;
  str = this.replace(/([^\W_]+[^\s-]*) */g, function(txt) {
    return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
  });

  // Certain minor words should be left lowercase unless 
  // they are the first or last words in the string
  lowers = ['A', 'An', 'The', 'And', 'But', 'Or', 'For', 'Nor', 'As', 'At', 
  'By', 'For', 'From', 'In', 'Into', 'Near', 'Of', 'On', 'Onto', 'To', 'With'];
  for (i = 0, j = lowers.length; i < j; i++)
    str = str.replace(new RegExp('\\s' + lowers[i] + '\\s', 'g'), 
      function(txt) {
        return txt.toLowerCase();
      });

  // Certain words such as initialisms or acronyms should be left uppercase
  uppers = ['Id', 'Tv'];
  for (i = 0, j = uppers.length; i < j; i++)
    str = str.replace(new RegExp('\\b' + uppers[i] + '\\b', 'g'), 
      uppers[i].toUpperCase());

  return str;
}

Por ejemplo:

"TO LOGIN TO THIS SITE and watch tv, please enter a valid id:".toTitleCase();
// Returns: "To Login to This Site and Watch TV, Please Enter a Valid ID:"

Prefiero lo siguiente sobre las otras respuestas. Solo coincide con la primera letra de cada palabra y la capitaliza. Código más simple, más fácil de leer y menos bytes. Conserva las letras mayúsculas existentes para evitar distorsionar los acrónimos. Sin embargo, siempre puede llamar toLowerCase()primero a su cadena.

function title(str) {
  return str.replace(/(^|\s)\S/g, function(t) { return t.toUpperCase() });
}

Puede agregar esto a su prototipo de cadena que le permitirá lo 'my string'.toTitle()siguiente:

String.prototype.toTitle = function() {
  return this.replace(/(^|\s)\S/g, function(t) { return t.toUpperCase() });
}

Ejemplo:

String.prototype.toTitle = function() {
  return this.replace(/(^|\s)\S/g, function(t) { return t.toUpperCase() });
}

console.log('all lower case ->','all lower case'.toTitle());
console.log('ALL UPPER CASE ->','ALL UPPER CASE'.toTitle());
console.log("I'm a little teapot ->","I'm a little teapot".toTitle());

Sin usar regex solo como referencia:

String.prototype.toProperCase = function() {
  var words = this.split(' ');
  var results = [];
  for (var i = 0; i < words.length; i++) {
    var letter = words[i].charAt(0).toUpperCase();
    results.push(letter + words[i].slice(1));
  }
  return results.join(' ');
};

console.log(
  'john smith'.toProperCase()
)

Podrías inmediatamente toLowerCasela cadena, y luego solo toUpperCasela primera letra de cada palabra. Se convierte en un 1 liner muy simple:

function titleCase(str) {
  return str.toLowerCase().replace(/\b(\w)/g, s => s.toUpperCase());
}

console.log(titleCase('iron man'));
console.log(titleCase('iNcrEdible hulK'));

En caso de que esté preocupado por esas palabras de relleno, siempre puede decirle a la función qué no capitalizar.

/**
 * @param String str The text to be converted to titleCase.
 * @param Array glue the words to leave in lowercase. 
 */
var titleCase = function(str, glue){
    glue = (glue) ? glue : ['of', 'for', 'and'];
    return str.replace(/(\w)(\w*)/g, function(_, i, r){
        var j = i.toUpperCase() + (r != null ? r : "");
        return (glue.indexOf(j.toLowerCase())<0)?j:j.toLowerCase();
    });
};

Espero que esto te ayude.

editar

Si desea manejar las palabras adhesivas iniciales, puede realizar un seguimiento de esta con una variable más:

var titleCase = function(str, glue){
    glue = !!glue ? glue : ['of', 'for', 'and', 'a'];
    var first = true;
    return str.replace(/(\w)(\w*)/g, function(_, i, r) {
        var j = i.toUpperCase() + (r != null ? r : '').toLowerCase();
        var result = ((glue.indexOf(j.toLowerCase()) < 0) || first) ? j : j.toLowerCase();
        first = false;
        return result;
    });
};

Si la expresión regular utilizada en las soluciones anteriores te confunde, prueba este código:

function titleCase(str) {
  return str.split(' ').map(function(val){ 
    return val.charAt(0).toUpperCase() + val.substr(1).toLowerCase();
  }).join(' ');
}

Hice esta función que puede manejar los apellidos (por lo que no es el caso del título) como "McDonald" o "MacDonald" o "O'Toole" o "D'Orazio". Sin embargo, no maneja nombres alemanes u holandeses con "van" o "von", que a menudo están en minúsculas ... Creo que "de" a menudo también está en minúsculas, como "Robert de Niro". Estos aún tendrían que ser abordados.

function toProperCase(s)
{
  return s.toLowerCase().replace( /\b((m)(a?c))?(\w)/g,
          function($1, $2, $3, $4, $5) { if($2){return $3.toUpperCase()+$4+$5.toUpperCase();} return $1.toUpperCase(); });
}

var toMatch = "john w. smith";
var result = toMatch.replace(/(\w)(\w*)/g, function (_, i, r) {
      return i.toUpperCase() + (r != null ? r : "");
    }
)

Parece funcionar ... Probado con lo anterior, "el zorro marrón rápido / saltos / ^ sobre ^ el perro perezoso ..." y "C: / archivos de programa / algún vendedor / su segunda aplicación / a file1.txt ".

Si desea 2º en lugar de 2º, puede cambiar a /([a-z])(\w*)/g .

La primera forma se puede simplificar como:

function toTitleCase(toTransform) {
  return toTransform.replace(/\b([a-z])/g, function (_, initial) {
      return initial.toUpperCase();
  });
}

Prueba esto

String.prototype.toProperCase = function(){
    return this.toLowerCase().replace(/(^[a-z]| [a-z]|-[a-z])/g, 
        function($1){
            return $1.toUpperCase();
        }
    );
};

Ejemplo

var str = 'john smith';
str.toProperCase();

Si puede usar bibliotecas de terceros en su código, lodash tiene una función auxiliar para nosotros.

https://lodash.com/docs/4.17.3#startCase

_.startCase('foo bar');
// => 'Foo Bar'

_.startCase('--foo-bar--');
// => 'Foo Bar'
 
_.startCase('fooBar');
// => 'Foo Bar'
 
_.startCase('__FOO_BAR__');
// => 'FOO BAR'

Prueba esto de la manera más corta:

str.replace(/(^[a-z])|(\s+[a-z])/g, txt => txt.toUpperCase());

ES 6

str.split(' ')
   .map(s => s.slice(0, 1).toUpperCase() + s.slice(1).toLowerCase())
   .join(' ')

más

str.split(' ').map(function (s) {
    return s.slice(0, 1).toUpperCase() + s.slice(1).toLowerCase();
}).join(' ')

La mayoría de estas respuestas parecen ignorar la posibilidad de usar el metacaracter de límite de palabra (\ b). Una versión más corta de la respuesta de Greg Dean utilizándola:

function toTitleCase(str)
{
    return str.replace(/\b\w/g, function (txt) { return txt.toUpperCase(); });
}

Funciona también para nombres con guiones como Jim-Bob.

Creo que lo más simple es usar CSS.

function format_str(str) {
    str = str.toLowerCase();
    return '<span style="text-transform: capitalize">'+ str +'</span>';
}

Úselo /\S+/gpara soportar diacríticos:

function toTitleCase(str) {
  return str.replace(/\S+/g, str => str.charAt(0).toUpperCase() + str.substr(1).toLowerCase());
}

console.log(toTitleCase("a city named örebro")); // A City Named Örebro

Sin embargo: " s unshine ( y ellow)" ⇒ " S unshine ( y ellow)"

Quería agregar mi propia respuesta, ya que necesitaba una toTitleCasefunción robusta que tenga en cuenta las reglas gramaticales enumeradas aquí (artículo recomendado por Google). Hay varias reglas que dependen de la longitud de la cadena de entrada. A continuación se muestran las pruebas de función + unidad.

La función también consolida espacios en blanco y elimina caracteres especiales (modifique la expresión regular para sus necesidades)

Función toTitleCase

const toTitleCase = (str) => {
  const articles = ['a', 'an', 'the'];
  const conjunctions = ['for', 'and', 'nor', 'but', 'or', 'yet', 'so'];
  const prepositions = [
    'with', 'at', 'from', 'into','upon', 'of', 'to', 'in', 'for',
    'on', 'by', 'like', 'over', 'plus', 'but', 'up', 'down', 'off', 'near'
  ];

  // The list of spacial characters can be tweaked here
  const replaceCharsWithSpace = (str) => str.replace(/[^0-9a-z&/\\]/gi, ' ').replace(/(\s\s+)/gi, ' ');
  const capitalizeFirstLetter = (str) => str.charAt(0).toUpperCase() + str.substr(1);
  const normalizeStr = (str) => str.toLowerCase().trim();
  const shouldCapitalize = (word, fullWordList, posWithinStr) => {
    if ((posWithinStr == 0) || (posWithinStr == fullWordList.length - 1)) {
      return true;
    }

    return !(articles.includes(word) || conjunctions.includes(word) || prepositions.includes(word));
  }

  str = replaceCharsWithSpace(str);
  str = normalizeStr(str);

  let words = str.split(' ');
  if (words.length <= 2) { // Strings less than 3 words long should always have first words capitalized
    words = words.map(w => capitalizeFirstLetter(w));
  }
  else {
    for (let i = 0; i < words.length; i++) {
      words[i] = (shouldCapitalize(words[i], words, i) ? capitalizeFirstLetter(words[i], words, i) : words[i]);
    }
  }

  return words.join(' ');
}

Pruebas unitarias para garantizar la corrección

import { expect } from 'chai';
import { toTitleCase } from '../../src/lib/stringHelper';

describe('toTitleCase', () => {
  it('Capitalizes first letter of each word irrespective of articles, conjunctions or prepositions if string is no greater than two words long', function(){
    expect(toTitleCase('the dog')).to.equal('The Dog'); // Capitalize articles when only two words long
    expect(toTitleCase('for all')).to.equal('For All'); // Capitalize conjunctions when only two words long
    expect(toTitleCase('with cats')).to.equal('With Cats'); // Capitalize prepositions when only two words long
  });

  it('Always capitalize first and last words in a string irrespective of articles, conjunctions or prepositions', function(){
    expect(toTitleCase('the beautiful dog')).to.equal('The Beautiful Dog');
    expect(toTitleCase('for all the deadly ninjas, be it so')).to.equal('For All the Deadly Ninjas Be It So');
    expect(toTitleCase('with cats and dogs we are near')).to.equal('With Cats and Dogs We Are Near');
  });

  it('Replace special characters with space', function(){
    expect(toTitleCase('[wolves & lions]: be careful')).to.equal('Wolves & Lions Be Careful');
    expect(toTitleCase('wolves & lions, be careful')).to.equal('Wolves & Lions Be Careful');
  });

  it('Trim whitespace at beginning and end', function(){
    expect(toTitleCase(' mario & Luigi superstar saga ')).to.equal('Mario & Luigi Superstar Saga');
  });

  it('articles, conjunctions and prepositions should not be capitalized in strings of 3+ words', function(){
    expect(toTitleCase('The wolf and the lion: a tale of two like animals')).to.equal('The Wolf and the Lion a Tale of Two like Animals');
    expect(toTitleCase('the  three Musketeers  And plus ')).to.equal('The Three Musketeers and Plus');
  });
});

Tenga en cuenta que estoy eliminando bastantes caracteres especiales de las cadenas proporcionadas. Tendrá que ajustar la expresión regular para abordar los requisitos de su proyecto.

"john f. kennedy".replace(/\b\S/g, t => t.toUpperCase())

Tomando la solución "lewax00", creé esta solución simple que obliga a "w" a partir del espacio o "w" que inicia la palabra, pero no puede eliminar los espacios intermedios adicionales.

"SOFÍA vergara".toLowerCase().replace(/\b(\s\w|^\w)/g, function (txt) { return txt.toUpperCase(); });

El resultado es "Sofía Vergara".

Aquí está mi función que se ocupa de los caracteres acentuados (¡importante para el francés!) Y que puede activar / desactivar el manejo de excepciones menores. Espero que ayude.

String.prototype.titlecase = function(lang, withLowers = false) {
    var i, string, lowers, uppers;

    string = this.replace(/([^\s:\-'])([^\s:\-']*)/g, function(txt) {
        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
    }).replace(/Mc(.)/g, function(match, next) {
        return 'Mc' + next.toUpperCase();
    });

    if (withLowers) {
        if (lang == 'EN') {
            lowers = ['A', 'An', 'The', 'At', 'By', 'For', 'In', 'Of', 'On', 'To', 'Up', 'And', 'As', 'But', 'Or', 'Nor', 'Not'];
        }
        else {
            lowers = ['Un', 'Une', 'Le', 'La', 'Les', 'Du', 'De', 'Des', 'À', 'Au', 'Aux', 'Par', 'Pour', 'Dans', 'Sur', 'Et', 'Comme', 'Mais', 'Ou', 'Où', 'Ne', 'Ni', 'Pas'];
        }
        for (i = 0; i < lowers.length; i++) {
            string = string.replace(new RegExp('\\s' + lowers[i] + '\\s', 'g'), function(txt) {
                return txt.toLowerCase();
            });
        }
    }

    uppers = ['Id', 'R&d'];
    for (i = 0; i < uppers.length; i++) {
        string = string.replace(new RegExp('\\b' + uppers[i] + '\\b', 'g'), uppers[i].toUpperCase());
    }

    return string;
}

Hemos tenido una discusión aquí en la oficina y creemos que tratar de corregir automáticamente la forma en que las personas ingresan los nombres en la forma actual que usted quiere que esté hecho está plagado de posibles problemas.

Hemos presentado varios casos en los que los diferentes tipos de capitalización automática se desmoronan y estos son solo para nombres en inglés, cada idioma tiene sus propias complejidades.

Problemas con el uso de mayúsculas en la primera letra de cada nombre:

• Acrónimos como IBM no pueden ser ingresados, se convertirían en Ibm.

• El nombre McDonald se convertiría en Mcdonald, lo cual es incorrecto, lo mismo es MacDonald también.

• Los nombres de doble cañón como Marie-Tonks se convertirían en Marie-tonks.

• Nombres como O'Connor se convertirían en O'connor.

Para la mayoría de estos, podría escribir reglas personalizadas para tratarlo, sin embargo, esto todavía tiene problemas con Acronyms como antes y obtiene un nuevo problema:

• Si se agrega una regla para arreglar nombres con Mac, como MacDonald, los nombres de ruptura como Macy lo convertirían en MacY.

La única solución que hemos encontrado que nunca es incorrecta es poner en mayúscula cada letra, que es un método de fuerza bruta que parece que también usa el DBS.

Entonces, si desea automatizar el proceso, es imposible hacerlo sin un diccionario de cada nombre y palabra y cómo se debe capitular, si no tiene una regla que cubra todo, no lo use ya que solo molestará a sus usuarios y les pedirá a las personas que quieran ingresar sus nombres correctamente que vayan a otro lado.

Aquí hay otra solución usando CSS (y JavaScript, si el texto que desea transformar está en mayúsculas):

html

<span id='text'>JOHN SMITH</span>

js

var str = document.getElementById('text').innerHtml;
var return_text = str.toLowerCase();

css

#text{text-transform:capitalize;}

Para aquellos de nosotros que tenemos miedo de las expresiones regulares (lol):

function titleCase(str)
{
    var words = str.split(" ");
    for ( var i = 0; i < words.length; i++ )
    {
        var j = words[i].charAt(0).toUpperCase();
        words[i] = j + words[i].substr(1);
    }
    return words.join(" ");
}

Mi solución de una línea:

String.prototype.capitalizeWords = function() {
    return this.split(" ").map(function(ele){ return ele[0].toUpperCase() + ele.slice(1).toLowerCase();}).join(" ");
};

Luego, puede llamar al método capitalizeWords()en cualquier cadena. Por ejemplo:

var myS = "this actually works!";
myS.capitalizeWords();

>>> This Actually Works

Mi otra solucion:

function capitalizeFirstLetter(word) {
    return word[0].toUpperCase() + word.slice(1).toLowerCase();
}
String.prototype.capitalizeAllWords = function() {
    var arr = this.split(" ");
    for(var i = 0; i < arr.length; i++) {
        arr[i] = capitalizeFirstLetter(arr[i]);
    }
    return arr.join(" ");
};

Luego, puede llamar al método capitalizeWords()en cualquier cadena. Por ejemplo:

var myStr = "this one works too!";
myStr.capitalizeWords();

>>> This One Works Too

Solución alternativa basada en la respuesta de Greg Dean:

function capitalizeFirstLetter(word) {
    return word[0].toUpperCase() + word.slice(1).toLowerCase();
}
String.prototype.capitalizeWords = function() {
    return this.replace(/\w\S*/g, capitalizeFirstLetter);
};

Luego, puede llamar al método capitalizeWords()en cualquier cadena. Por ejemplo:

var myString = "yes and no";
myString.capitalizeWords()

>>> Yes And No

Sorprendido de ver que nadie mencionó el uso del parámetro rest. Aquí hay un revestimiento simple que utiliza los parámetros de descanso de ES6.

let str="john smith"
str=str.split(" ").map(([firstChar,...rest])=>firstChar.toUpperCase()+rest.join("").toLowerCase()).join(" ")
console.log(str)

Esto se basa en mi solución para el "Caso de título" de la hoguera de FreeCodeCamp , que requiere que primero convierta la cadena dada a minúsculas y luego convierta cada carácter con un espacio en mayúsculas.

Sin usar regex:

function titleCase(str) {
 return str.toLowerCase().split(' ').map(function(val) { return val.replace(val[0], val[0].toUpperCase()); }).join(' ');
}