javascript - first - title css

Convertir la cadena en el caso del título con JavaScript

Question

¿Hay una forma sencilla de convertir una cadena a título de caso? Por ejemplo, john smith convierte en 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.

Answer 1

Aquí está mi función que es cuidar los caracteres acentuados (¡importante para el francés!) Y que puede activar / desactivar el manejo de las excepciones más bajas. 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;
}

Answer 2

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 en 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:"

Answer 3

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

var str = "foo bar baz"
str.split('' '')
.map(w => w[0].toUpperCase() + w.substr(1).toLowerCase())
.join('' '')
// returns "Foo Bar Baz"

Answer 4

Creo que lo más simple es usar css.

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

Answer 5

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('' '')

Answer 6

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.

Answer 7

Esto funciona solo para cadenas de palabras, pero eso es lo que necesitaba:

''string''.replace(/^[a-z]/, function (x) {return x.toUpperCase()}) // String

JSFiddle: https://jsfiddle.net/simo/gou2uhLm/

Answer 8

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

Sin usar regex:

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

Answer 9

Hemos estado teniendo una discusión aquí en la oficina y creemos que tratar de corregir automáticamente la forma en que las personas ingresan los nombres de la forma actual en la que quiere hacerlo está cargado de posibles problemas.

Hemos encontrado varios casos en los que diferentes tipos de mayúsculas automáticas se desintegran y estos son solo para nombres en inglés, cada idioma tiene sus propias complejidades.

Problemas con la capitalización de 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 tonel como Marie-Tonks se convertirían en Marie-tonks.

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

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

• Agregar una regla para arreglar nombres con Mac como MacDonald, sería el de los nombres de ruptura como Macy convirtiéndolo en MacY.

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

Por lo tanto, si desea automatizar el proceso, es imposible hacerlo sin un diccionario con todos los nombres y palabras, y cómo debe estar en mayúsculas. Si no tiene una regla que cubra todo, no lo use, ya que solo molestará a sus usuarios e invitará a las personas que desean ingresar sus nombres correctamente para ir a otro lugar a donde.

Answer 10

Hice esta función que puede manejar 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 o holandeses con "van" o "von", que a menudo están en minúsculas ... Creo que "de" a menudo está en minúsculas, como "Robert de Niro". Esto aún tendría que ser abordado.

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(); });
}

Answer 11

Intenta aplicar el estilo CSS de text-transform a tus controles.

por ejemplo: (text-transform: capitalize);

Solo use un enfoque JS cuando sea absolutamente necesario.

Answer 12

Intenta esto, camino más corto:

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

Answer 13

La mayoría de estas respuestas parecen ignorar la posibilidad de usar la palabra metacarácter de límite (/ b). Una versión más corta de la respuesta de Greg Dean utilizando:

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

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

Answer 14

Mi versión simple y fácil al problema:

 function titlecase(str){
var arr=[];
var str1=str.split('' '');
for (var i = 0; i < str1.length; i++) {
var upper= str1[i].charAt(0).toUpperCase()+ str1[i].substr(1);
arr.push(upper);
};
return arr.join('' '');
}
titlecase(''my name is suryatapa roy'');

Answer 15

No es breve, pero esto es lo que se me ocurrió en una tarea reciente en la escuela:

var myPoem = ''What is a jQuery but a misunderstood object?''
//What is a jQuery but a misunderstood object? --> What Is A JQuery But A Misunderstood Object?
//code here
var capitalize = function(str) {
var strArr = str.split('' '');
var newArr = [];
for (var i = 0; i < strArr.length; i++) {
newArr.push(strArr[i].charAt(0).toUpperCase() + strArr[i].slice(1))
};
return newArr.join('' '')
}
var fixedPoem = capitalize(myPoem);
alert(fixedPoem);

Answer 16

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

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(" ");
}

Answer 17

Podrías inmediatamente toLowerCase la cadena de la cadena y luego simplemente toUpperCase la primera letra de cada palabra. Se convierte en un 1 trazador de líneas 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''));

Answer 18

Prefiero lo siguiente a las otras respuestas. Coincide solo con la primera letra de cada palabra y la capitaliza. Código más sencillo, más fácil de leer y menos bytes. Conserva las letras mayúsculas existentes para evitar distorsiones acrónimos. Sin embargo, siempre puedes llamar a toLowerCase() en tu cadena primero.

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á ''my string''.toTitle() siguiente manera:

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

Answer 19

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();

Answer 20

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>

Answer 21

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

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

Función aTitleCase

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 asegurar 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 algunos caracteres especiales de las cadenas proporcionadas. Deberá modificar la expresión regular para satisfacer los requisitos de su proyecto.

Answer 22

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

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

Answer 23

Si puede usar bibliotecas de terceros en su código, entonces 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''

Answer 24

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('' '');
};
''john smith''.toProperCase();

Answer 25

Solución prototipo de la solución de Greg Dean:

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

Answer 26

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".

Answer 27

Una forma algo 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();

Answer 28

Use //S+/g para soportar los signos 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)"

Answer 29

Versión más simple, más sencilla, con almacenamiento en caché simple.

 var TITLE_CASE_LOWER_MAP = {
''a'': 1, ''an'': 1, ''and'': 1, ''as'': 1, ''at'': 1, ''but'': 1, ''by'': 1, ''en'':1, ''with'': 1,
''for'': 1, ''if'': 1, ''in'': 1, ''of'': 1, ''on'': 1, ''the'': 1, ''to'': 1, ''via'': 1
};
// LEAK/CACHE TODO: evaluate using LRU.
var TITLE_CASE_CACHE = new Object();
toTitleCase: function (title) {
if (!title) return null;
var result = TITLE_CASE_CACHE[title];
if (result) {
return result;
}
result = "";
var split = title.toLowerCase().split(" ");
for (var i=0; i < split.length; i++) {
if (i > 0) {
result += " ";
}
var word = split[i];
if (i == 0 || TITLE_CASE_LOWER_MAP[word] != 1) {
word = word.substr(0,1).toUpperCase() + word.substr(1);
}
result += word;
}
TITLE_CASE_CACHE[title] = result;
return result;
},

Answer 30

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, "the quick-brown, fox? / Jumps / ^ over ^ the ¡lazy! Dog ..." y "C: / program files / some vendor / su segunda aplicación / a file1.txt ".

Si desea 2Nd en lugar de 2nd, puede cambiar a /([az])(/w*)/g .

La primera forma se puede simplificar como:

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