Javascript30 - Sort Without Articles

기록일기📫·2021년 1월 31일

목록 보기

14/16

이번 실습은 배열로 전달된 요소를 'A', 'An', 'The'와 같은 단어 빼고 사전식으로 정렬해보는 실습을 해 보았다.

내가 짠 코드와 정답코드를 비교해보며 정규표현식의 위대한 힘을 알게되었다. 😂😂

Learning Point

정규표현식에 대해 학습한다.
Array.prototype.sort 함수에 대해 학습한다.

HTML Part

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Sort Without Articles</title>
</head>
  <body>
    <ul id="bands"></ul>
  </body>
</html>

CSS Part

    body {
      margin: 0;
      font-family: sans-serif;
      background: url("https://source.unsplash.com/nDqA4d5NL0k/2000x2000");
      background-size: cover;
      display: flex;
      align-items: center;
      min-height: 100vh;
    }

    #bands {
      list-style: inside square;
      font-size: 20px;
      background: white;
      width: 500px;
      margin: auto;
      padding: 0;
      box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.05);
    }
    
    #bands li {
      border-bottom: 1px solid #efefef;
      padding: 20px;
    }
    
    #bands li:last-child {
      border-bottom: 0;
    }

    a {
      color: #ffc600;
      text-decoration: none;
    }


*,
*:before,
*:after {
  box-sizing: inherit;
}

h1 {
  margin-top: 0;
}

.site-wrap {
  max-width: 700px;
  margin: 100px auto;
  background: white;
  padding: 40px;
  text-align: justify;
}

.align-left {
  float: left;
  margin-right: 20px;
}

.align-right {
  float: right;
  margin-left: 20px;
}

.slide-in {
  opacity: 0;
  transition: all 0.5s;
}

.align-left.slide-in {
  transform: translateX(-30%) scale(0.95);
}

.align-right.slide-in {
  transform: translateX(30%) scale(0.95);
}

.slide-in.active {
  opacity: 1;
  transform: translateX(0%) scale(1);
}

Javascript Part

const bands = [
  "The Plot in You",
  "The Devil Wears Prada",
  "Pierce the Veil",
  "Norma Jean",
  "The Bled",
  "Say Anything",
  "The Midway State",
  "We Came as Romans",
  "Counterparts",
  "Oh, Sleeper",
  "A Skylit Drive",
  "Anywhere But Here",
  "An Old Dog",
];

/* version 1 */
const ul = document.querySelector("#bands");

const sortFunction = (a, b) => {
  const exceptWords = ["A", "An", "The"];
  const firstWordinA = a.split(" ")[0];
  const firstWordinB = b.split(" ")[0];

  if (exceptWords.includes(firstWordinA)) {
    a = a.slice(firstWordinA.length + 1);
  }
  if (exceptWords.includes(firstWordinB)) {
    b = b.slice(firstWordinB.length + 1);
  }
  return a > b ? 1 : -1;
};

ul.innerHTML = sortedArray.map((band) => `<li>${band}</li>`).join("");


/* version 2 */

function strip(bandName) {
  return bandName.replace(/^(a |the |an )/i, "").trim();
}

const sortedBands = bands.sort((a, b) => (strip(a) > strip(b) ? 1 : -1));

document.querySelector("#bands").innerHTML = sortedBands
        .map((band) => `<li>${band}</li>`)
        .join("");