Saya pada dasarnya mengambil URL seperti http://localhost:3000/north-america/america dan kemudian setelah garis miring ketiga menempatkan setiap entri ke dalam array.

Saya memiliki array string seperti ini ["america", "north-america"].

Saya ingin menggunakan huruf besar setiap huruf pertama dari setiap entri dan setiap kata di setiap entri dan kemudian menggabungkan string kembali bersama untuk memberi saya hasil ini ["Amerika", "Amerika Utara].

Saya juga ingin menghapus tanda hubung dari entri apa pun dan menggantinya dengan spasi yang memberi saya hasil akhir ["Amerika", "Amerika Utara].

Sejauh ini saya telah berhasil mendapatkan ini ["Amerika", "Amerika Utara"] tetapi saya berjuang untuk menggunakan huruf besar pada kata kedua.

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]);
2
ashley g 3 Juli 2021, 17:01

4 jawaban

Jawaban Terbaik

Saya akan membagi string dengan spasi, menggunakan huruf besar pada setiap kata dan menggabungkannya kembali:

const capitaliseEntry = 
    removeDashes.split(' ').map(w => w[0].toUpperCase() + w.slice(1)).join(' ');
3
Mureinik 3 Juli 2021, 14:05
  • Hal pertama yang pertama, dalam kode Anda
      parts = url.split('/');
      parts.splice(0, 3);
      parts.reverse();
      parts.splice(0, 1);

Mengapa Anda memiliki baris terakhir, alias parts.splice(0, 1)? Karena sejauh ini saya memahami pertanyaan Anda, Anda ingin semua entri dari garis miring ke-3, dan baris terakhir ini hanya menghapus elemen terakhir. Jadi Anda memberi contoh http://localhost:3000/north-america/america, dengan kode Anda, itu hanya akan mengembalikan ["north-america"], bukan america karena dihapus oleh baris terakhir kode Anda.

  • Saat mendapatkan array, Anda dapat memetakan semua item untuk menghapus Tanda hubung terlebih dahulu, lalu Anda dapat memanfaatkannya. Seperti contoh berikut.
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(" ");
});

Sekarang semua variabel ini untuk kejelasan tentang apa yang terjadi, dan jika Anda mau, Anda sebenarnya dapat menggabungkan semua fungsi tersebut, seperti ini

const data = parts.map((element: string) => element.replace(/-/g, " ").split(" ").map((word: string) => word[0].toUpperCase() + word.slice(1).toLowerCase()).join(" "));
  • Saya juga melihat Anda mendeklarasikan bagian seperti ini
      let parts: string[] = [];

      parts = url.split('/');

Tetapi Anda bahkan tidak memiliki kode perantara, atau sepertinya begitu. Maka bukankah lebih baik menginisialisasi variabel Anda dengan

const parts: string[] = url.split("/");
2
RishiMath 3 Juli 2021, 14:29

Menggunakan objek URL untuk mengisolasi pathname dan split untuk mengembalikan string jalur individual. Kemudian String#replace() dengan regex dan panggilan balik untuk secara bersamaan menghapus tanda hubung dan menggunakan huruf besar untuk huruf pertama.

const
  titleCase = (s) => s.replace(/\b([-\w])/g, m => m === '-' ? ' ' : m.toUpperCase()),

  url = "http://localhost:3000/north-america/america",

  data = new URL(url) // URL { href: 'http://localhost:3000/north-america/america', origin: 'http://localhost:3000', protocol: 'http:', username: '', password: '', host: 'localhost:3000', hostname: 'localhost', port: '3000', pathname: '/north-america/america', search: '', searchParams: URLSearchParams { }, hash: ''}
    .pathname         // "/north-america/america"
    .slice(1)         // "north-america/america"
    .split('/')       // ["north-america", "america"]
    .map(titleCase)   // ["North America", "America"]
    .reverse();       // ["America", "North America"]

console.log(data.join(', '));
1
pilchard 3 Juli 2021, 17:19

Langkah demi langkah adalah pendekatan terbaik.

  • Pertama-tama pisahkan URL menggunakan karakter / sebagai pembagi.
let parts: string[] = url.split("/")
  • Singkirkan semuanya sebelum tiga garis miring pertama.
parts = parts.slice(3)
  • Lihat setiap item dalam larik bagian untuk setiap karakter - dan hapus.
  • Pisahkan setiap item menjadi kata-kata terpisah.
  • Kapitalisasi huruf pertama setiap kata.
  • Gabungkan kata-kata kembali menjadi item.
parts = parts.map(item => {

    // Replacing dashes with spaces
    item = item.replace(/-/g, " ")

    
    item = item.split(" ") // Splitting each part into separate words
               .map(word => word[0].toUpperCase() + word.slice(1)) // Capitalising the first letter of each word
               .join(" ") // Joining back capitalised words

    return item
})
  • Akhirnya balikkan array untuk menempatkan bagian-bagian dalam urutan yang benar
parts = parts.reverse()

Solusi Verbose Penuh

let url = "http://localhost:3000/north-america/america"

let parts = url.split("/")

parts = parts.slice(3)

parts = parts.map(item => {
  item = item.replace(/-/g, " ")
  
  item = item
    .split(" ")
    .map(word => word[0].toUpperCase() + word.slice(1))
    .join(" ")

  return item
})


parts = parts.reverse()


console.log(parts) // Outputs: ["America", "North America"]

Solusi Non-Verbose Penuh

let url = "http://localhost:3000/north-america/america"

let parts = url
  .split("/")
  .slice(3)
  .map(item => {
    return item
      .replace(/-/g, " ")
      .split(" ")
      .map(word => word[0].toUpperCase() + word.slice(1))
      .join(" ")
  }).reverse()


console.log(parts) // Outputs: ["America", "North America"]
1
lejlun 4 Juli 2021, 15:03