使用JavaScript将字符串转换为标题大小写

2020/09/24 10:01 · javascript ·  · 0评论

有没有简单的方法可以将字符串转换为标题大小写?例如john smith变为John Smith我不是在寻找像John Resig的解决方案那样复杂的东西,只是(希望)某种一线或两线。

试试这个:

    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>

稍微更优雅的方式,可以适应Greg Dean的功能:

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

像这样称呼它:

"pascal".toProperCase();

尝试将文本转换的 CSS样式应用于控件。

例如: (text-transform: capitalize);

仅在绝对必要时使用JS方法。

这是我的版本,IMO,也很容易理解和优雅。

var str = "foo bar baz"

console.log(

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

)
// returns "Foo Bar Baz"

这是我的函数,它可以转换为标题大小写,但还保留定义的首字母缩写词为大写,次要单词保留为小写:

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

例如:

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

与其他答案相比,我更喜欢以下内容。它仅匹配每个单词的第一个字母并将其大写。代码更简单,更易于阅读且字节更少。它保留现有的大写字母,以防止首字母缩写词失真。但是,您始终可以toLowerCase()调用字符串。

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

您可以将其添加到字符串原型中,这将使您可以执行'my string'.toTitle()以下操作:

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

例:

var result =
  'this is very interesting'.replace(/\b[a-z]/g, (x) => x.toUpperCase())

console.log(result) // This Is Very Interesting

不使用正则表达式仅供参考:

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

您可以立即toLowerCase输入字符串,然后toUpperCase输入每个单词的第一个字母。成为一个非常简单的1班轮:

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

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

以防万一您担心这些填充词,您总是可以告诉函数不要大写的内容。

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

希望这可以帮助你。

编辑

如果要处理前导粘合词,则可以跟踪此w /一个变量:

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

如果上述解决方案中使用的正则表达式让您感到困惑,请尝试以下代码:

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

惊讶地发现没有人提到rest参数的使用。这是一个使用ES6 Rest参数的简单衬垫。

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

我制作了可以处理姓氏(因此不是标题大小写)的函数,例如“ McDonald”或“ MacDonald”或“ O'Toole”或“ D'Orazio”。但是,它不能处理带有小写的“ van”或“ von”的德语或荷兰语名称,我相信“ de”也经常是小写的,例如“ Robert de Niro”。这些仍然必须解决。

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

似乎可以正常工作...经过上面的测试,“快棕色的狐狸? file1.txt”。

如果您想要2Nd而不是2nd,则可以更改为/([a-z])(\w*)/g

第一种形式可以简化为:

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

ES 6

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

其他

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

试试这个

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

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

如果您可以在代码中使用第三方库,那么lodash将为我们提供帮助功能。

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'

尝试这种最简单的方法:

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

这些答案大多数似乎都忽略了使用单词边界元字符(\ b)的可能性。Greg Dean使用它的答案的简短版本:

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

也适用于连字符的名字,例如Jim-Bob。

我认为最简单的方法是使用CSS。

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

使用/\S+/g以支持变音符号:

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

但是:“ s变亮(y黄色)”⇒“ s变亮(y黄色)”

我想添加自己的答案,因为我需要一个toTitleCase功能强大的功能,该功能考虑了此处列出的语法规则(Google推荐的文章)。有多种规则取决于输入字符串的长度。以下是功能+单元测试。

该函数还合并空格并删除特殊字符(根据需要修改正则表达式)

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

单元测试以确保正确性

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

请注意,我从提供的字符串中删除了很多特殊字符。您将需要调整正则表达式以解决项目的需求。

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

使用“ lewax00”解决方案,我创建了这个简单的解决方案,该解决方案强制以“ w”开头的空格或“ w”开头的de word,但是无法删除多余的中间空格。

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

结果是“SofíaVergara”。

这是我的功能,用于处理带重音的字符(对于法语来说很重要!),并且可以打开/关闭降低异常的处理。希望能有所帮助。

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

我们在办公室这里一直在进行讨论,我们认为尝试以您想要的当前方式自动更正人们输入姓名的方式充满了可能的问题。

我们提出了几种情况,其中不同类型的自动大写字母分开了,这些仅用于英文名称,每种语言都有其自身的复杂性。

每个名字的首字母大写的问题:

•不允许输入缩写词,例如IBM,将变成ibm。

•麦当劳的名字会变成麦当劳,这是不正确的,麦克唐纳也是一样。

•像玛丽·唐克斯(Marie-Tonks)这样的双重桶装名字将变成玛丽·唐克斯。

•诸如O'Connor的名称将变成O'connor。

对于大多数这些,您可以编写自定义规则来处理它,但是,与以前一样,首字母缩略词仍然存在问题,并且您会遇到一个新问题:

•添加规则以使用Mac(例如MacDonald)修复名称时,诸如Macy之类的中断名称会将其转换为MacY。

我们提出的唯一永远不会出错的解决方案是将每个字母都大写,这是DBS似乎也使用的蛮力方法。

因此,如果您想使流程自动化,那么没有每个名称和单词的字典以及如何对其进行首字母大写是不可能的,如果您没有涵盖所有内容的规则,请不要使用它只会惹恼您的用户,并提示想要正确输入其名称的人转到其他地方。

这是使用CSS(和javascript,如果要转换的文本为大写)的另一种解决方案:

html

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

js

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

的CSS

#text{text-transform:capitalize;}

我的一线解决方案:

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

然后,您可以capitalizeWords()在任何字符串上调用该方法例如:

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

>>> This Actually Works

我的其他解决方案:

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

然后,您可以capitalizeWords()在任何字符串上调用该方法例如:

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

>>> This One Works Too

基于Greg Dean的替代解决方案:

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

然后,您可以capitalizeWords()在任何字符串上调用该方法例如:

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

>>> Yes And No

将单个单词转换为标题大小写的简单方法

使用“ Slice”方法和字符串连接

str.slice(0, 1).toUpperCase() + str.slice(1, str.length)

*如果要小写单词的其余部分,请在末尾添加.toLowerCase()

使用ES6 Spread运算符,映射和联接

[...str].map((w, i) => i === 0 ? w[0].toUpperCase() : w).join('')

对于那些害怕正则表达式的人:

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(" ");
}
本文地址:http://javascript.askforanswer.com/shiyongjavascriptjiangzifuchuanzhuanhuanweibiaotidaxiaoxie.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!