javascript - Capitalizar a primeira letra de cada palavra em uma string em um array de strings

Basicamente, eu estou pegando uma URL como http://localhost:3000/north-america/america e então, depois da terceira barra, colocando cada entrada em um array.

Eu tenho um array de strings assim ["america", "north-america"].

Quero capitalizar a primeira letra de cada entrada e de cada palavra em cada entrada e depois juntar as strings de volta para me dar este resultado ["America", "North-America"].

Eu também quero remover os traços de qualquer entrada e substituí-los por um espaço, me dando o resultado final de ["America", "North America"].

Até agora, consegui obter isso ["America", "North america"], mas estou tendo dificuldade em colocar a segunda palavra com letra maiúscula.

const urls = "http://localhost:3000/north-america/america"

useEffect(() => {
    if (withAvailabilityChecker === true && urlS !== undefined) {
      const url = urlS;
      let parts: string[] = [];

      parts = url.split('/');
      parts.splice(0, 3);
      parts.reverse();
      parts.splice(0, 1);

      const newParts: string[] = [];

      parts.forEach(el => {
        const removeDashes = el.replaceAll('-', ' ');
        const capitaliseEntry = removeDashes.charAt(0).toUpperCase() + removeDashes.slice(1);
        newParts.push(capitaliseEntry);
      });

      if (newParts.length > 2) {
        newParts.length = 2;
      }
      const result = newParts.join(',' + ' ');

      setInputVal(result);
    }
  }, [urlS, locationName]);

Resposta #1

Eu dividiria a string por espaço, capitalizaria cada palavra e as juntaria novamente:

const capitaliseEntry = 
    removeDashes.split(' ').map(w => w[0].toUpperCase() + w.slice(1)).join(' ');

Resposta #2

• Primeiro de tudo, no seu código

      parts = url.split('/');
      parts.splice(0, 3);
      parts.reverse();
      parts.splice(0, 1);

Por que você tem a última linha, também conhecida como parts.splice(0, 1)? Pelo que eu entendi da sua pergunta, você quer todas as entradas a partir da 3ª barra, e essa última linha apenas remove o último elemento. Então, você deu o exemplo de http://localhost:3000/north-america/america, pelo seu código, ele simplesmente retornaria ["north-america"], não america, já que é removido pela última linha do seu código.

• Ao obter o array, você pode mapear todos os itens para remover os traços primeiro, depois você poderia capitalizá-los. Como no seguinte exemplo.

const data = parts.map((element: string) => {
    const dashesRemoved = element.replace(/-/g, " ");
    const dashesRemovedWords = dashesRemoved.split(" ");
    const dashesRemovedCapitalized= dashesRemovedWords.map((word: string) => word[0].toUpperCase() + word.slice(1).toLowerCase());

    return dashesRemovedCapitalized.join(" ");
});

Agora todas essas variáveis são para clareza sobre o que está acontecendo e, se você quiser, você pode realmente combinar todas essas funções, assim

const data = parts.map((element: string) => element.replace(/-/g, " ").split(" ").map((word: string) => word[0].toUpperCase() + word.slice(1).toLowerCase()).join(" "));

• Também vejo que você está declarando partes assim

      let parts: string[] = [];

      parts = url.split('/');

Mas você nem sequer tem algum código intermediário, ou pelo menos é o que parece. Então não seria melhor inicializar sua variável com

const parts: string[] = url.split("/");