Viết hoa các từ trong chuỗi

Cách tiếp cận tốt nhất để viết hoa các từ trong một chuỗi là gì?

/**
 * Capitalizes first letters of words in string.
 * @param {string} str String to be modified
 * @param {boolean=false} lower Whether all other letters should be lowercased
 * @return {string}
 * @usage
 *   capitalize('fix this string');     // -> 'Fix This String'
 *   capitalize('javaSCrIPT');          // -> 'JavaSCrIPT'
 *   capitalize('javaSCrIPT', true);    // -> 'Javascript'
 */
const capitalize = (str, lower = false) =>
  (lower ? str.toLowerCase() : str).replace(/(?:^|\s|["'([{])+\S/g, match => match.toUpperCase());
;

• sửa giải pháp của Marco Demaio trong đó chữ cái đầu tiên có khoảng trắng ở trước không được viết hoa.

capitalize(' javascript'); // -> ' Javascript'

• có thể xử lý các biểu tượng quốc gia và chữ có dấu.

capitalize('бабушка курит трубку');  // -> 'Бабушка Курит Трубку'
capitalize('località àtilacol')      // -> 'Località Àtilacol'

• có thể xử lý báo giá và niềng răng.

capitalize(`"quotes" 'and' (braces) {braces} [braces]`);  // -> "Quotes" 'And' (Braces) {Braces} [Braces]

Việc triển khai ngắn nhất để viết hoa các từ trong một chuỗi là sau bằng cách sử dụng các hàm mũi tên của ES6:

'your string'.replace(/\b\w/g, l => l.toUpperCase())
// => 'Your String'

Triển khai tương thích ES5:

'your string'.replace(/\b\w/g, function(l){ return l.toUpperCase() })
// => 'Your String'

Regex về cơ bản khớp với chữ cái đầu tiên của mỗi từ trong chuỗi đã cho và chỉ chuyển đổi chữ cái đó thành chữ hoa:

• \ b khớp với một ranh giới từ (bắt đầu hoặc kết thúc của từ);
• \ w khớp với ký tự meta sau [a-zA-Z0-9].

Đối với các ký tự không phải ASCII, hãy tham khảo giải pháp này thay thế

'ÿöur striñg'.replace(/(^|\s)\S/g, l => l.toUpperCase())

Regex này khớp với chữ cái đầu tiên và mọi chữ cái không phải khoảng trắng đứng trước khoảng trắng trong chuỗi đã cho và chỉ chuyển đổi chữ cái đó thành chữ hoa:

• \ s khớp với một ký tự khoảng trắng
• \ S khớp với một ký tự không phải khoảng trắng
• (x | y) phù hợp với bất kỳ giải pháp thay thế nào được chỉ định

Một nhóm không chụp có thể đã được sử dụng ở đây như sau /(?:^|\s)\S/gdùg cờ trong regex của chúng tôi sẽ không bắt các nhóm phụ theo thiết kế.

Chúc mừng!

function capitalize(s){
    return s.toLowerCase().replace( /\b./g, function(a){ return a.toUpperCase(); } );
};

capitalize('this IS THE wOrst string eVeR');

đầu ra: "Đây là chuỗi tồi tệ nhất từng có"

Cập nhật:

Nó xuất hiện giải pháp này thay thế cho tôi: https://stackoverflow.com/a/7592235/104380

Câu trả lời được cung cấp bởi vsync hoạt động miễn là bạn không có chữ cái có dấu trong chuỗi đầu vào.

Tôi không biết lý do, nhưng rõ ràng các \bkết quả khớp regex cũng có các chữ cái có dấu (đã được thử nghiệm trên IE8 và Chrome), do đó, một chuỗi như "località"được viết hoa sai thành"LocalitÀ" ( àchữ cái được viết hoa vì regrec nghĩ rằng đó là ranh giới từ)

Một chức năng tổng quát hơn cũng hoạt động với các chữ cái có dấu là cái này:

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

Bạn có thể sử dụng nó như thế này:

alert( "hello località".toCapitalize() );

Vì mọi người đã cho bạn câu trả lời JavaScript mà bạn đã yêu cầu, tôi sẽ gửi vào đó thuộc tính CSS text-transform: capitalize sẽ thực hiện chính xác điều này.

Tôi nhận ra đây có thể không phải là những gì bạn yêu cầu - bạn đã không cung cấp cho chúng tôi bất kỳ bối cảnh nào mà bạn đang chạy này - nhưng nếu nó chỉ để trình bày, tôi chắc chắn sẽ đi với giải pháp thay thế CSS.

John Resig (danh tiếng của jQuery) đã chuyển một tập lệnh perl, được viết bởi John Gruber, sang JavaScript. Kịch bản này viết hoa theo cách thông minh hơn, nó không viết hoa các từ nhỏ như 'của' và 'và' chẳng hạn.

Bạn có thể tìm thấy nó ở đây: Viết hoa tiêu đề trong JavaScript

Sử dụng JavaScript và html

String.prototype.capitalize = function() {
  return this.replace(/(^|\s)([a-z])/g, function(m, p1, p2) {
    return p1 + p2.toUpperCase();
  });
};

<form name="form1" method="post">
  <input name="instring" type="text" value="this is the text string" size="30">
  <input type="button" name="Capitalize" value="Capitalize >>" onclick="form1.outstring.value=form1.instring.value.capitalize();">
  <input name="outstring" type="text" value="" size="30">
</form>

Về cơ bản, bạn có thể làm string.capitalize()và nó sẽ viết hoa mỗi chữ cái đầu tiên của mỗi từ.

Nguồn: http://www.mediacolitic.com/iNET/javascript/text/case-capitalize.html

Câu trả lời của Ivo là tốt, nhưng tôi không thích kết hợp \wvì không cần viết hoa 0-9 và AZ. Chúng ta có thể bỏ qua những điều đó và chỉ phù hợp trên az.

'your string'.replace(/\b[a-z]/g, match => match.toUpperCase())
// => 'Your String'

Đó là cùng một đầu ra, nhưng tôi nghĩ rõ ràng hơn về mặt tự viết mã.

Nếu bạn đang sử dụng lodash trong ứng dụng JavaScript của mình, bạn có thể sử dụng _.capitalize :

console.log( _.capitalize('ÿöur striñg') );
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js"></script>

Một cách làm ES6 súc tích có thể trông giống như thế này.

const capitalizeFirstLetter = s => s.charAt(0).toUpperCase() + s.slice(1)

Điều này chỉ viết hoa chữ cái đầu tiên và không ảnh hưởng đến phần còn lại của câu.

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

String.prototype.toCapital = function () {
    return this.toLowerCase().split(' ').map(function (i) {
        if (i.length > 2) {
            return i.charAt(0).toUpperCase() + i.substr(1);
        }

        return i;
    }).join(' ');
};

Thí dụ:

'álL riGht'.toCapital();
// Returns 'Áll Right'

Điều này sẽ bao gồm hầu hết các trường hợp sử dụng cơ bản.

const capitalize = (str) => {
    if (typeof str !== 'string') {
      throw Error('Feed me string')
    } else if (!str) {
      return ''
    } else {
      return str
        .split(' ')
        .map(s => {
            if (s.length == 1 ) {
                return s.toUpperCase()
            } else {
                const firstLetter = s.split('')[0].toUpperCase()
                const restOfStr = s.substr(1, s.length).toLowerCase()
                return firstLetter + restOfStr
            }     
        })
        .join(' ')
    }
}


capitalize('THIS IS A BOOK') // => This Is A Book
capitalize('this is a book') // => This Is A Book
capitalize('a 2nd 5 hour boOk thIs weEk') // => A 2nd 5 Hour Book This Week

Chỉnh sửa: Cải thiện khả năng đọc bản đồ.

Liều giải pháp này không sử dụng regex, hỗ trợ các ký tự có dấu và cũng được hỗ trợ bởi hầu hết mọi trình duyệt.

function capitalizeIt(str) {
    if (str && typeof(str) === "string") {
        str = str.split(" ");    
        for (var i = 0, x = str.length; i < x; i++) {
            if (str[i]) {
                str[i] = str[i][0].toUpperCase() + str[i].substr(1);
            }
        }
        return str.join(" ");
    } else {
        return str;
    }
}    

Sử dụng:

console.log (capitalizeIt ('çao 2nd trong chương trình Javascript'));

Đầu ra:

Chương trình Javascript thứ 2 bên trong

http://www.mediacolitic.com/iNET/javascript/text/case-capitalize.html là một trong nhiều câu trả lời ngoài kia.

Google có thể là tất cả những gì bạn cần cho những vấn đề như vậy.

Một cách tiếp cận ngây thơ sẽ là phân tách chuỗi theo khoảng trắng, viết hoa chữ cái đầu tiên của mỗi phần tử của mảng kết quả và nối nó lại với nhau. Điều này chỉ để lại chữ viết hoa (ví dụ HTML vẫn là HTML và không trở thành thứ gì đó ngớ ngẩn như Html). Nếu bạn không muốn điều đó ảnh hưởng, hãy biến toàn bộ chuỗi thành chữ thường trước khi tách nó ra.

Mã này viết hoa các từ sau dấu chấm:

function capitalizeAfterPeriod(input) { 
    var text = '';
    var str = $(input).val();
    text = convert(str.toLowerCase().split('. ')).join('. ');
    var textoFormatado = convert(text.split('.')).join('.');
    $(input).val(textoFormatado);
}

function convert(str) {
   for(var i = 0; i < str.length; i++){
      str[i] = str[i].split('');
      if (str[i][0] !== undefined) {
         str[i][0] = str[i][0].toUpperCase();
      }
      str[i] = str[i].join('');
   }
   return str;
}

Tôi thích đi với quá trình dễ dàng. Đầu tiên Thay đổi chuỗi thành Mảng để lặp lại dễ dàng, sau đó sử dụng chức năng bản đồ thay đổi từng từ theo ý muốn.

function capitalizeCase(str) {
    var arr = str.split(' ');
    var t;
    var newt;
    var newarr = arr.map(function(d){
        t = d.split('');
        newt = t.map(function(d, i){
                  if(i === 0) {
                     return d.toUpperCase();
                    }
                 return d.toLowerCase();
               });
        return newt.join('');
      });
    var s = newarr.join(' ');
    return s;
  }

Jquery hoặc Javascipt không cung cấp phương thức tích hợp để đạt được điều này.

Biến đổi kiểm tra CSS (chuyển đổi văn bản: viết hoa;) không thực sự viết hoa dữ liệu của chuỗi nhưng hiển thị kết xuất được viết hoa trên màn hình.

Nếu bạn đang tìm kiếm một cách hợp pháp hơn để đạt được điều này ở cấp dữ liệu bằng cách sử dụng vanillaJS đơn giản, hãy sử dụng giải pháp này =>

var capitalizeString = function (word) {    
    word = word.toLowerCase();
    if (word.indexOf(" ") != -1) { // passed param contains 1 + words
        word = word.replace(/\s/g, "--");
        var result = $.camelCase("-" + word);
        return result.replace(/-/g, " ");
    } else {
    return $.camelCase("-" + word);
    }
}

Dùng cái này:

String.prototype.toTitleCase = function() {
  return this.charAt(0).toUpperCase() + this.slice(1);
}

let str = 'text';
document.querySelector('#demo').innerText = str.toTitleCase();

<div class = "app">
  <p id = "demo"></p>
</div>

Bạn có thể sử dụng cách sau để viết hoa các từ trong chuỗi:

function capitalizeAll(str){

    var partes = str.split(' ');

    var nuevoStr = ""; 

    for(i=0; i<partes.length; i++){
    nuevoStr += " "+partes[i].toLowerCase().replace(/\b\w/g, l => l.toUpperCase()).trim(); 
    }    

    return nuevoStr;

}

Ngoài ra còn có locutus: https://locutus.io/php/strings/ucwords/ định nghĩa theo cách này:

function ucwords(str) {
  //  discuss at: http://locutus.io/php/ucwords/
  // original by: Jonas Raoni Soares Silva (http://www.jsfromhell.com)
  // improved by: Waldo Malqui Silva (http://waldo.malqui.info)
  // improved by: Robin
  // improved by: Kevin van Zonneveld (http://kvz.io)
  // bugfixed by: Onno Marsman (https://twitter.com/onnomarsman)
  // bugfixed by: Cetvertacov Alexandr (https://github.com/cetver)
  //    input by: James (http://www.james-bell.co.uk/)
  //   example 1: ucwords('kevin van  zonneveld')
  //   returns 1: 'Kevin Van  Zonneveld'
  //   example 2: ucwords('HELLO WORLD')
  //   returns 2: 'HELLO WORLD'
  //   example 3: ucwords('у мэри был маленький ягненок и она его очень любила')
  //   returns 3: 'У Мэри Был Маленький Ягненок И Она Его Очень Любила'
  //   example 4: ucwords('τάχιστη αλώπηξ βαφής ψημένη γη, δρασκελίζει υπέρ νωθρού κυνός')
  //   returns 4: 'Τάχιστη Αλώπηξ Βαφής Ψημένη Γη, Δρασκελίζει Υπέρ Νωθρού Κυνός'

  return (str + '').replace(/^(.)|\s+(.)/g, function ($1) {
    return $1.toUpperCase();
  });
};

Tôi sẽ sử dụng regex cho mục đích này:

myString = '  this Is my sTring.  ';
myString.trim().toLowerCase().replace(/\w\S*/g, (w) => (w.replace(/^\w/, (c) => c.toUpperCase())));