Chuyển đổi chuỗi thành trường hợp tiêu đề với JavaScript

Có một cách đơn giản để chuyển đổi một chuỗi thành trường hợp tiêu đề? Ví dụ john smithtrở thành John Smith. Tôi không tìm kiếm thứ gì đó phức tạp như giải pháp của John Resig , chỉ (hy vọng) một loại nào đó một hoặc hai lớp lót.

Thử cái này:

    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>

Một cách thanh lịch hơn một chút, điều chỉnh chức năng của Greg Dean:

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

Gọi nó như:

"pascal".toProperCase();

Cố gắng áp dụng kiểu CSS biến đổi văn bản cho các điều khiển của bạn.

ví dụ: (text-transform: capitalize);

Chỉ sử dụng một cách tiếp cận JS khi thực sự cần thiết.

Đây là phiên bản của tôi, IMO thật dễ hiểu và thanh lịch.

var str = "foo bar baz"

console.log(

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

)
// returns "Foo Bar Baz"

Đây là chức năng của tôi chuyển đổi sang trường hợp tiêu đề nhưng cũng giữ các từ viết tắt được xác định là chữ hoa và các từ nhỏ là chữ thường:

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

Ví dụ:

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

Tôi thích sau đây hơn các câu trả lời khác. Nó chỉ khớp với chữ cái đầu tiên của mỗi từ và viết hoa nó. Mã đơn giản hơn, dễ đọc hơn và ít byte hơn. Nó bảo tồn các chữ in hoa hiện có để ngăn chặn các từ viết tắt. Tuy nhiên, bạn luôn có thể gọi toLowerCase()trên chuỗi của bạn đầu tiên.

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

Bạn có thể thêm phần này vào nguyên mẫu chuỗi của bạn, điều này sẽ cho phép bạn 'my string'.toTitle()như sau:

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

Thí dụ:

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

Không sử dụng regex chỉ để tham khảo:

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

Bạn có thể ngay lập tức toLowerCasechuỗi, và sau đó chỉ toUpperCaselà chữ cái đầu tiên của mỗi từ. Trở thành một lớp lót rất đơn giản:

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

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

Chỉ trong trường hợp bạn lo lắng về những từ phụ đó, bạn luôn có thể chỉ cho hàm biết những gì không viết hoa.

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

Hy vọng điều này sẽ giúp bạn ra ngoài.

biên tập

Nếu bạn muốn xử lý các từ keo hàng đầu, bạn có thể theo dõi biến này với thêm một biến:

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

Nếu regex được sử dụng trong các giải pháp trên khiến bạn bối rối, hãy thử mã này:

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

Tôi đã thực hiện chức năng này có thể xử lý tên cuối cùng (vì vậy đây không phải là trường hợp tiêu đề) như "McDonald" hoặc "MacDonald" hoặc "O'Toole" hoặc "D'Orazio". Tuy nhiên, nó không xử lý tên tiếng Đức hoặc tiếng Hà Lan bằng "van" hoặc "von" thường ở dạng chữ thường ... Tôi tin rằng "de" thường là chữ thường, chẳng hạn như "Robert de Niro". Những điều này vẫn sẽ phải được giải quyết.

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

Có vẻ như đã hoạt động ... Đã thử nghiệm với những điều trên, "con cáo nhanh màu nâu, con cáo? file1.txt ".

Nếu bạn muốn 2Nd thay vì thứ 2, bạn có thể thay đổi thành /([a-z])(\w*)/g .

Hình thức đầu tiên có thể được đơn giản hóa như:

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

Thử cái này

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

Thí dụ

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

Nếu bạn có thể sử dụng các thư viện của bên thứ ba trong mã của mình thì lodash có chức năng trợ giúp cho chúng tôi.

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'

Hãy thử cách này, cách ngắn nhất:

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

khác

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

Hầu hết các câu trả lời này dường như bỏ qua khả năng sử dụng metacharacter ranh giới từ (\ b). Một phiên bản ngắn hơn của câu trả lời của Greg Dean sử dụng nó:

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

Hoạt động cho các tên gạch nối như Jim-Bob quá.

Tôi nghĩ đơn giản nhất là sử dụng css.

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

Sử dụng /\S+/gđể hỗ trợ dấu phụ:

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

Tuy nhiên: " s unlight ( y ellow )" " S unlight ( y ellow )"

Tôi muốn thêm câu trả lời của riêng mình vì tôi cần một toTitleCasechức năng mạnh mẽ có tính đến các quy tắc ngữ pháp được liệt kê ở đây (bài viết được đề xuất của Google). Có nhiều quy tắc khác nhau phụ thuộc vào độ dài của chuỗi đầu vào. Dưới đây là chức năng + kiểm tra đơn vị.

Hàm này cũng hợp nhất khoảng trắng và xóa các ký tự đặc biệt (sửa đổi biểu thức chính quy cho nhu cầu của bạn)

Chức năng 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(' ');
}

Kiểm tra đơn vị để đảm bảo tính chính xác

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

Xin lưu ý rằng tôi đang loại bỏ khá nhiều ký tự đặc biệt khỏi chuỗi được cung cấp. Bạn sẽ cần phải điều chỉnh regex để giải quyết các yêu cầu của dự án của bạn.

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

Sử dụng giải pháp "lewax00", tôi đã tạo ra giải pháp đơn giản này bắt buộc "w" bắt đầu bằng dấu cách hoặc "w" khởi tạo từ, nhưng không thể xóa các khoảng trắng trung gian bổ sung.

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

Kết quả là "Sofía Vergara".

Đây là chức năng của tôi là chăm sóc các ký tự có dấu (quan trọng đối với tiếng Pháp!) Và có thể bật / tắt việc xử lý các ngoại lệ thấp. Mong rằng sẽ giúp.

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

Chúng tôi đã có một cuộc thảo luận tại văn phòng ở đây và chúng tôi nghĩ rằng việc cố gắng tự động sửa cách mọi người nhập tên theo cách hiện tại mà bạn muốn làm là có nhiều vấn đề có thể xảy ra.

Chúng tôi đã đưa ra một số trường hợp trong đó các loại viết hoa tự động khác nhau và chúng chỉ dành cho tên tiếng Anh, mỗi ngôn ngữ có độ phức tạp riêng.

Các vấn đề viết hoa chữ cái đầu tiên của mỗi tên:

• Các từ viết tắt như IBM không được phép nhập vào, sẽ biến thành Ibm.

• Tên McDonald sẽ biến thành Mcdonald không chính xác, điều tương tự cũng là MacDonald.

• Những tên nòng đôi như Marie-Tonks sẽ bị biến thành Marie-tonks.

• Những tên như O'Connor sẽ biến thành O'connor.

Đối với hầu hết những điều này, bạn có thể viết các quy tắc tùy chỉnh để đối phó với nó, tuy nhiên, điều này vẫn có vấn đề với các từ viết tắt như trước đây và bạn gặp phải một vấn đề mới:

• Thêm một quy tắc để sửa các tên bằng Mac như MacDonald, các tên bị phá vỡ như Macy sẽ biến nó thành MacY.

Giải pháp duy nhất mà chúng tôi đưa ra là không bao giờ sai là viết hoa mỗi chữ cái là phương pháp vũ lực mà DBS dường như cũng sử dụng.

Vì vậy, nếu bạn muốn tự động hóa quy trình thì tốt nhất là không thể thực hiện được nếu không có từ điển của mỗi tên và từ và cách viết hoa, nếu bạn không có quy tắc bao gồm mọi thứ thì đừng sử dụng nó. sẽ chỉ gây khó chịu cho người dùng của bạn và nhắc những người muốn nhập tên của họ một cách chính xác để đi nơi khác.

Đây là một giải pháp khác sử dụng css (và javascript, nếu văn bản bạn muốn chuyển đổi là chữ hoa):

html

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

js

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

css

#text{text-transform:capitalize;}

Đối với những người trong chúng ta sợ biểu thức thông thường (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(" ");
}

Giải pháp một dòng của tôi:

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

Sau đó, bạn có thể gọi phương thức capitalizeWords()trên bất kỳ chuỗi nào. Ví dụ:

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

>>> This Actually Works

Giải pháp khác của tôi:

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

Sau đó, bạn có thể gọi phương thức capitalizeWords()trên bất kỳ chuỗi nào. Ví dụ:

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

>>> This One Works Too

Giải pháp thay thế dựa trên câu trả lời của Greg Dean:

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

Sau đó, bạn có thể gọi phương thức capitalizeWords()trên bất kỳ chuỗi nào. Ví dụ:

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

>>> Yes And No

Ngạc nhiên khi thấy không ai đề cập đến việc sử dụng tham số nghỉ ngơi. Đây là một lớp lót đơn giản sử dụng các tham số ES6 Rest.

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

Điều này dựa trên giải pháp của tôi cho "Trường hợp tiêu đề" Bonfire của FreeCodeCamp , yêu cầu bạn trước tiên chuyển đổi chuỗi đã cho thành tất cả chữ thường và sau đó chuyển đổi mọi ký tự tiến hành khoảng trắng thành chữ hoa.

Không sử dụng regex:

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