«
»

JavaScript: String.replace()

Sep 16 2009

რამდენიმე წლის წინ დავწერე პოსტი JavaScript – ით DOM ელემენტის სტილებთან მუშაობის შესახებ. ბრაუზერებს შორის სხვაობიდან გამომდინარე(კერძოდ კი IE – ს განსხვავებული მიდგომის გამო) პრობლემის გვერდის ასავლელად დავწერე ქვემოთ ნაჩვენები კოდი:

1
2
3
4
5
6
7
8
9
10
function getCamelCase(string) {
    var tokens = string.split('-');
    if (tokens.length > 1) {
        for (var i = 1; i < tokens.length; i++) {
            tokens[i] = tokens[i].substring(0, 1).toUpperCase() + tokens[i].substring(1).toLowerCase();
        }
        string = tokens.join('');
    }
    return string;
}

კოდის ერთადერთი დანიშნულებაა ტირეებიანი CSS ატრიბუტების მაგ. border-left-color, background-color გადაყვანა ე.წ. Camel Case ფორმატში ანუ borderLeftColor, backgroundColor და ა.შ.

დღეს კოდის წერისას იგივე პრობლემა მექანიკურად გადავჭერი სხვა უფრო მოხდენილი და რაც მთავარია გაცილებით მცირე ზომის კოდის მეშვეობით:

1
2
3
4
5
6
7
8
var str = "some-test-string";
str.replace(/-([\w])/gi, function(a1, a2) {
    return a2.toUpperCase();
});

//კოდის შესრულების შემდეგ
//სტრიქონი "some-test-string"
//გარდაიქმნება შემდეგნაირად: "someTestString"

დამეთანხმებით რომ თვალსაჩინო სხვაობაა :D როგორ მუშაობს ეს კოდი? პირველ რიგში შეგახსენებთ თავად String ობიექტის replace() მეთოდის სიგნატურას:

str.replace(regexp|substr, newSubStr|function[, Non-standard flags]);

ანუ replace() მეთოდს მეორე პარამეტრად ახალი, ჩასანაცვლებელი სტრიქონის ნაცვლად შეგვიძლია გადავცეთ ქოლბექ ფუნქცია რომელიც დააბრუნებს დამუშავებულ სტრიქონს, ხოლო ეს დაბრუნებული სტრიქონი თავის მხრივ გამოყენებული იქნება რეგულარული გამოსახულების მიერ ნაპოვნი შესატყვისის ჩასანაცვლებლად.

საინტერესოა ასევე თუ რა პარამეტრებს გადასცემს replace() მეთოდი ქოლბექ ფუნქციას. გადასაცემი პარამეტრების რაოდენობა ცვალებადია და დამოკიდებულია მთელ რიგ ფაქტორებზე. მაგალითად ჩემს მიერ ნაჩვენებ მაგალითში ფუნქციას გადაეცემა ოთხი პარამეტრი, კერძოდ კი ფუნქცია გამოიძახება ორჯერ შემდეგი პარამეტრებით:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//პიველი დამთხვევისათვის ანუ "-t"
function(
  "-t",  //რეგულარული გამოსახულების მიერ ნაპოვნი სტრიქონი სრულად
  "t",    //დამაჯგუფებელ ფრჩხილებში მოთავსებული შედეგი
  4,     //პოზიცია რომელზეც მოხდა პირველი დამთხვევა
  "some-test-string" //სრული სტრიქონი
);

//მეორე დამთხვევისათვის ანუ "-s"
function(
  "-s",  //რეგულარული გამოსახულების მიერ ნაპოვნი სტრიქონი სრულად
  "s",    //დამაჯგუფებელ ფრჩხილებში მოთავსებული შედეგი
  9,     //პოზიცია რომელზეც მოხდა პირველი დამთხვევა
  "some-test-string" //სრული სტრიქონი
);

ნაჩვენები კოდიდან თვალსაჩინოა სავარაუდო პარამეტრების რაოდენობა, თუმცა მნიშვნელოვანია შემდეგი დეტალების გათვალისწინება, ქოლბექ ფუნქციას:

  • პირველ პარამეტრად ყოველთვის გადაეცემა რეგულარული გამოსახულების მიერ ნაპოვნი სრული შესატყვისი;
  • ბოლო პარამეტრად ყოველთვის გადაეცემა სრული სტრიქონი რომლშიც განხორციელდა გარკვეული შესატყვისის ძიება;
  • ბოლოდან მეორე(ბოლოს წინა) პარამეტრად ყოველთვის გადაეცემა ნაპოვნი შესატყვისის პოზიცია.
  • თუ რამდენი პარამეტრის გადაცემა მოხდება პირველსა და ბოლო ორ პარამეტრს შორის დამოკიდებულია რეგულარულ გამოსახულებაში გამოყენებული დამაჯგუფებელი ფრჩხილების რაოდენობაზე(ჩემს მიერ ნაჩვენებ მაგალითში ასეთი პარამეტრი ერთია რადგან მხოლოდ ერთი დამაჯგუფება მაქვს გამოყენებული);
  • replace() მეთოდი გამოიძახებს ერთხელ თუ რეგულარული გამოსახულების ბოლოს არ გვაქვს მითითებული “g” ანუ გლობალური მოდიფიკატორი, ან გამოიძახებს იმდენჯერ რამდენი დამთხვევაც მოხდება კონკრეტული შესატყვისისათვის(ნაჩვენებ მაგალითში გამოძახება მოხდება ორჯერ).

enjoy B-)

ტეგები: ,

8 Responses to “JavaScript: String.replace()”

  1. ირაკლი says:
    September 16, 2009 at 9:50 pm

    აშკარად იზრდები :)

    მაგრამ აი ტირეებიანი სტაილშიტების ქემელქეისში გადაყვანა სადაური პროგრამისტული ექსპანსიაა დიზაინერთა ნეტარ სავანეში, ვერ გავიგე :) რატო უნდა გადაიყვანო, კაცო? ძალიან უხდება, ტირეები სიესესს. პროჩ რუკი ოტ კომუნიზმა! :)

  2. ირაკლი says:
    September 16, 2009 at 9:54 pm

    P.S. “რამდენიმეწლისწინანდელი” პოსტი უნდა წამეკითხა სანამ დიზაინერთა უფლებების დაცვაზე გადავიდოდი :D

    ახლა, გასაგებია ყველაფერი, პაპიკ, მარა ეს IE როდის მოკვდება, ჩაძაღლდება, წაიღებს ჭირს და დაგვანებებს თავს? :(

  3. იოსები says:
    September 16, 2009 at 10:11 pm

    ძალიან გადაეფარე დიზაინერებს :) :)

    დიდი მადლობა!

    ხო IE როდის მოკვდება არ ვიცი მითუმეტეს IE6 – ის პოზიციები ჯერ იმდენად მყარია და ტრენდიც ისეთია რომ IE7 უფრო ადრე შეწყვეტს თავის არსებობას ვიდრე IE6 :(

  4. ლაშა says:
    September 17, 2009 at 11:12 am

    არა ძმაო ეს “ვიში პილოტაჟია”

  5. Samurai says:
    September 18, 2009 at 8:51 am

    :) საინტერესო პოსტია როგორც ყოველთვის.
    მიყვარს regex-ები და სადაც შემიძლია ყველგან მაგათ ვტენი :D

    ერთი ადგილი ვერ გავიგე მხოლოდ. ფუნქციის პარამეტრები – ამბობ რომ ოთხ პარამეტრს გადასცემ, მაგრამ აქ ორია function(a1, a2). თუ რადგან ისინი არ გამოიყენება, აღარ წერია?

  6. იოსები says:
    September 18, 2009 at 9:08 am

    @Samurai

    ძალიან დიდი მადლობა :)

    პარამეტრებს მე კი არ გადავცემ replace მეთოდი გადასცემს ჩემს ქოლბექ ფუნქციას.

    მე უბრალოდ დანარჩენ პარამეტრებს იგნორირებას ვუკეთებ ანუ რომ დამეწერა:

    1
    function(a1, a2, a3, a4)

    მაინც იგივე შედეგს მივიღებდი. უბრალოდ ის პარამეტრები რომლებიც მაგ შემთხვევაში არ მესაჭიროვებოდა ქოლბექ ფუნქციაში არ მივუთითე. თუმცა ეს არ ნიშნავს რომ პარამეტრები არ გადმოეცემა ქოლბექს. ამის შემოწმება მარტივად შეგიძლია ანონიმურ arguments პარამეტრის მეშვეობით:

    ქოლბექის შიგნით უბრალოდ დაწერე:

    1
    2
    3
    4
    function(a1, a2) {
       console.log(arguments);
       return a2.toUpperCase();
    }
  7. Samurai says:
    September 18, 2009 at 10:21 am

    კი, ეს ვიგულისხმე.

    გასაგებია :)

  8. Samurai says:
    September 18, 2009 at 10:22 am

    “პარამეტრებს მე კი არ გადავცემ replace მეთოდი გადასცემს ჩემს ქოლბექ ფუნქციას.”

    კი, ეს ვიგულისხმე.

    გასაგებია :)

დატოვე კომენტარი:

ქართული კლავიატურა, ჩართვა/გამორთვა კლავიშით "~"