자바스크립트 문법 9 - 배열(Array) 의 다양한 메서드 3 (분해와 융합) 해답

 

* 연습과제 1

해답 1

const friends = [
    {name: 'victoria', age: 13, city: 'seoul'},
    {name: 'sun', age: 34, city: 'busan'},
    {name: 'johseb', age: 25, city: 'busan'},
    {name: 'syleemomo', age: 9, city: 'seoul'},
    {name: 'hannah', age: 41, city: 'daegu'},
    {name: 'shara', age: 37, city: 'seoul'},
    {name: 'martin', age: 28, city: 'daegu'},
    {name: 'gorgia', age: 39, city: 'seoul'},
    {name: 'nana', age: 24, city: 'busan'},
    {name: 'dannel', age: 19, city: 'seoul'},
]


const seoulFriends = friends
.sort( (f1, f2) => {
    if(f1.city > f2.city) return 1
    if(f1.city < f2.city) return -1

    if(f1.age > f2.age) return 1
    if(f1.age < f2.age) return -1

    else return 0
})
.slice(friends.findIndex(friend => friend.city.indexOf('seoul') > -1))

console.log(seoulFriends)

해답 2

const friends = [
  {name: 'victoria', age: 13, city: 'seoul'},
  {name: 'sun', age: 34, city: 'busan'},
  {name: 'johseb', age: 25, city: 'busan'},
  {name: 'syleemomo', age: 9, city: 'seoul'},
  {name: 'hannah', age: 41, city: 'daegu'},
  {name: 'shara', age: 37, city: 'seoul'},
  {name: 'martin', age: 28, city: 'daegu'},
  {name: 'gorgia', age: 39, city: 'seoul'},
  {name: 'nana', age: 24, city: 'busan'},
  {name: 'dannel', age: 19, city: 'seoul'},
]

const seoulFriends = friends
.sort((a, b) => a.city > b.city ? 1 : a.city < b.city ? -1 : a.age - b.age)
.filter(friend => friend.city === 'seoul')

console.log(seoulFriends)

slice 메서드를 사용하라고 하였지만 filter 를 사용하는게 더 괜찮은것 같다. 이유는 slice 를 사용하면 서울에 사는 첫번째 친구의 인덱스 위치를 구하기 위하여 frineds 배열이 한번더 순회해야 한다. 즉, 반복문이 한번 더 실행된다. 또한, 조건문도 간단하게 연속적인 삼항연산자를 사용하여 코드의 간결성을 높였다. 

 

* 연습과제 2

const rootDiv = document.getElementById('root')

const lyrics = `
Don't, don't worry 'bout \n
Don't worry \n
Don't worry \n
Don't, don't worry 'bout me \n
오지랖 떨지 말고 신경 꺼 \n
온 세상이 날 등져도 I don't give a fuck \n
God is watchin' over me 나 죽을 일 없어 \n
내 걱정은 세상에서 제일 쓸데없는 짓 \n
부정적인 shit, man I ain't got time \n
썸머소닉 to 코첼라, 글라스톤베리가 다음 \n
일상이 축제니까 감사하기도 바빠 \n
Middle finger to the Devil, stop fuckin' up my vibe! \n
영화처럼 살았네 \n
역경이 상대역인데 웃으며 환영해 \n
그 정도는 돼야 내가 인생 연기를 해주잖냐 \n
보여줘야지, 사방이 아역들인데 \n
애들이 배우잖아 \n
내 혼을 베어다가 아낌없이 준 내 아티스트리 \n
다 남을 깎아내릴 때 난 나를 깎아 나눴지 \n
'Cause I am Groot motherfucker \n
Ay mind yo fuckin' business 너는 내 걱정 안 해도 돼 \n
부러우면 그냥 부럽다고 말해도 돼 \n
네가 신경 안 써줘도 나는 잘 지내거든 \n
Don't you worry 'bout me \n
You know I'm fly muthafucka \n
Baby never give a fuck about a thang \n
그게 나에 관한 거라면 더욱더 no thanks \n 
Baby never give a fuck about a thang \n
내 걱정은 no thanks \n
신경써줘서 고마워 \n
아가미 달린 시키 알아서 헤엄 치니 \n
Take care of yourself \n
치킨 다리 먼저 겟할 걱정이나 해 \n
모지리 이미지야 이리 잘하니 zip your lips huh? \n
대장인 척 해도 소화 못해 거기서 쳇기 쳇기 \n
쉬운 게 아니야, 무대는 'bout your 객기 \n
체크해 motherfuckers, my lyrics \n
Motherfucker 만 써도 이젠 혐이라 하는 시대, shit \n
Rhyme에 R도 모르는 대중은 프로듀서가 됐고 \n
농사짓는 울 삼촌은 거의 엔터 제작 대표 \n
조카는 음평가 태도 \n
내가 니 안줏거리지만 내가 느그 상사 느그 선생 아니듯이 \n
느그들이 누굴 평가하고 하면 띠꺼워 \n
내 사생활이 궁금하면 니가 내 엄마해 새꺄 알겠어? \n
Ay mind yo fuckin' business 너는 내 걱정 안 해도 돼 \n
부러우면 그냥 부럽다고 말해도 돼 \n
네가 신경 안 써줘도 나는 잘 지내거든 \n
Don't you worry 'bout me \n
You know I'm fly muthafucka \n
Baby never give a fuck about a thang \n
그게 나에 관한 거라면 더욱더 no thanks \n
Baby never give a fuck about a thang \n
내 걱정은 no thanks, ya \n
경쟁은 관심 밖, 돌린 눈과 귀 \n
틈만 나면 찾고 있네, 다음 휴가지 \n
나이 들어 보니까 인생은 주관식 \n
남 보기보다 중요해, 내 삶이 둔 가치 \n
고이 무렵부터 내 갈 길을 걸어 \n
나도 안 한 내 걱정을 해준 분들 여럿 \n
덕분에 내 할 일에만 매진한 결과 \n
난 이제 돈과 시간 모두 몇 배를 더 벌어 \n
너 할 일 해, 시간이 돈인데 \n
다 먹고 살만한가 봐? 두 손 놀리네 \n
날 한 방 먹일 생각이면 좀 더 고민해 \n
대식가인 내겐 먹어봐야 겨우 요기인데 \n
난 물먹어도 절망 안에 배영 \n
잠수타도 14년째 곡이 배를 채워 \n
불통보다 소통이 더 유행이니까 \n
다 들어 줄게, 불만 있는 놈들 먼저 줄부터 세워 (걱정하지 말아요) \n
야야 난 first class 양아치에 third class 연예인 \n
내 Hollywood style 연애는 엄마의 스트레스 원인 \n
삶은 계속되는 이별여행, 쉴틈없이 나는 꺼내 \n
이번 애인은 의사였으면 해, 정신병원에 \n
틈만 나면 한 눈 팔아, 나는 오급 장애죠 \n
나의 불행은 너의 행복, 그래 맘껏 즐겨줘 \n
망막 기증까진 오바야, 날 그만 걱정해줘 \n
나는 저 멀리 보고 살아, 한쪽으로도 \n
힙합씬은 여전히 내겐 오백의 삼십 사이즈 \n
내 영혼이 살기엔 너무 좆만해서 탄식 하 \n
나는 오로지 나의 존망만이 관심사 \n
욕을 존나 쳐먹어도 찌지 않아, 망신살 \n
"출근 안하는 CEO", "허슬 안하는 랩퍼" \n
"내 거품 속에서 목욕하는 그녀들은 왜 예뻐?" \n
성실한 이름들 사이에 이제 나는 못 껴 \n
난 시간에 쫒겨 살해당한 내 시체를 자주 목격 \n
앨범은 내 때가 되면 내, 비난은 발매가 되면 해 \n
기다려주는 팬들에게 미안해 기분 개같았는데 \n
돈도 좆도 안되는 대체 왜 너네가 negative? \n
니 오빠 똥꼬나 더 긁어줘라 fuck your magnetic \n
백날 씨부려대봤자 내 입만 아픔 \n
에픽 앨범에 난 똥을 싸질러놨구 \n
이건 내가 예전에 깠던 Born Hater Part 2 \n
일동 기립 박수 안 칠거면 내 얼굴에 칵 투 \n
Ay mind yo fuckin' business 너는 내 걱정 안 해도 돼 \n
부러우면 그냥 부럽다고 말해도 돼 \n
네가 신경 안 써줘도 나는 잘 지내거든 \n
Don't you worry 'bout me \n
You know I'm fly muthafucka \n
Baby never give a fuck about a thang \n
그게 나에 관한 거라면 더욱더 no thanks \n
Baby never give a fuck about a thang \n
내 걱정은 no thanks \n
You get one life \n
나한테 낭비하지 마라 \n
Can I live my life? \n
Let me live it how I wanna \n
내 걱정은 no thanks (내 걱정은 no thanks) \n
내 걱정은 no thanks (내 걱정은 no thanks) \n
내 걱정은 no thanks (thank you) \n
I am
`

const modifiedSentence = lyrics.
                        split(' ')
                        .map(word => {
                            if(word.includes('똥') || word.includes('shit')){
                                return '💩'
                            }else if(word.includes('fuck')){
                                return '❤️'
                            }else{
                                return word
                            }
                        })
                        .join(' ')


console.log(modifiedSentence)
rootDiv.innerHTML = modifiedSentence

 

* 연습과제 3

const novel = `
Sherlock Holmes she is always the
woman. I have seldom heard him mention her under any other name. In his
eyes she eclipses and predominates the
whole of her sex. It was not that he felt any emotion akin to love for Irene Adler. All emotions, and
that one particularly, were abhorrent to his cold,
precise but admirably balanced mind. He was, I
take it, the most perfect reasoning and observing
machine that the world has seen, but as a lover he
would have placed himself in a false position. He
never spoke of the softer passions, save with a gibe
and a sneer. They were admirable things for the observer—excellent for drawing the veil from men’s
motives and actions. But for the trained reasoner
to admit such intrusions into his own delicate and
finely adjusted temperament was to introduce a distracting factor which might throw a doubt upon all
his mental results. Grit in a sensitive instrument, or
a crack in one of his own high-power lenses, would
not be more disturbing than a strong emotion in
a nature such as his. And yet there was but one
woman to him, and that woman was the late Irene
Adler, of dubious and questionable memory.
I had seen little of Holmes lately. My marriage
had drifted us away from each other. My own
complete happiness, and the home-centred interests which rise up around the man who first finds
himself master of his own establishment, were sufficient to absorb all my attention, while Holmes,
who loathed every form of society with his whole
Bohemian soul, remained in our lodgings in Baker
Street, buried among his old books, and alternating
from week to week between cocaine and ambition,
the drowsiness of the drug, and the fierce energy of
his own keen nature. He was still, as ever, deeply
attracted by the study of crime, and occupied his
immense faculties and extraordinary powers of observation in following out those clues, and clearing
up those mysteries which had been abandoned as
hopeless by the official police. From time to time
I heard some vague account of his doings: of his
summons to Odessa in the case of the Trepoff murder, of his clearing up of the singular tragedy of
the Atkinson brothers at Trincomalee, and finally
of the mission which he had accomplished so delicately and successfully for the reigning family of
Holland. Beyond these signs of his activity, however, which I merely shared with all the readers of
the daily press, I knew little of my former friend
and companion.
`

const classified = {}
const specialCharacters = '`~!@#$%^&*()-_=+|\<>,.?/:;\'"—’'
const alphabetFrequency = []

// 구현하기
novel
.split('')
.forEach(c => {
    const cl = c.toLowerCase()
    if(specialCharacters.includes(cl) || cl === '\n' || cl === ' ') return
    if(!classified[cl]) classified[cl] = 0
    classified[cl]++
})


for(let c in classified){
    alphabetFrequency.push({ alphabet: c, cnt: classified[c]})
}


alphabetFrequency.sort( (a, b) => b.cnt - a.cnt )

console.log(alphabetFrequency)

alphabetFrequency.forEach(obj => console.log(obj.alphabet, ':', obj.cnt))

 

* 연습과제 4

const lyricsEl = document.getElementById('lyrics')
const searchEl = document.getElementById('search')

const lyrics = `
어느새 빗물이 \n
내 발목에 고이고 \n
참았던 눈물이 \n
내 눈가에 고이고 I cry \n
텅 빈 방엔 시계소리 \n
지붕과 입 맞추는 비의 소리 \n
오랜만에 입은 코트 주머니 속에 반지 \n
손 틈새 스며드는 memory \n
며칠 만에 나서보는 밤의 서울 \n
고인 빗물은 작은 거울 \n
그 속에 난 비틀거리며 아프니까 \n
그대 없이 난 한 쪽 다리가 짧은 의자 \n
둘이서 쓰긴 작았던 우산 \n
차가운 세상에 섬 같았던 우산 \n
이젠 너무 크고 어색해 \n
그대 곁에 늘 젖어있던 왼쪽 어깨 (뭐해?) \n
기억의 무게에 고개 숙여보니 \n 
버려진 듯 풀어진 내 신발끈 \n
허나 곁엔 오직 비와 바람 \n
(없다) 잠시라도 우산을 들어줄 사람 \n
And I cry \n
어느새 빗물이 \n
내 발목에 고이고 \n
참았던 눈물이 \n
내 눈가에 고이고 I cry \n
그대는 내 머리 위의 우산 \n
어깨 위에 차가운 비 내리는 밤 \n
내 곁에 그대가 습관이 돼버린 나 \n
난 그대 없이는 안 돼요. Alone in the rain \n
Alone in the rain, rain, rain \n
Nothin' but pain, pain, pain \n
Girl, I just want you to know \n
Alone in the rain, rain, rain \n
Nothin' but pain, pain, pain \n
And I just can't let you go \n
하늘의 눈물이 고인 땅 \n
별을 감춘 구름에 보인 달 \n
골목길 홀로 외로운 구두 소리 \n
메아리에 돌아보며 가슴 졸인 맘 \n
나를 꼭 닮은 그림자 \n
서로가 서로를 볼 수 없었던 우리가 \n
이제야 둘인가? 대답을 그리다 \n
머릿속 그림과 대답을 흐린다 \n
내 눈엔 너무 컸던 우산 \n
날 울린 세상을 향해 접던 우산 \n
영원의 약속에 활짝 폈던 우산 \n
이제는 찢겨진 우산 아래 두 맘 \n
돌아봐도 이젠 없겠죠 \n
두 손은 주머니 속 깊게 넣겠죠 \n
이리저리 자유롭게 걸어도 \n
두 볼은 가랑비에도 쉽게 젖겠죠 \n
난 열어놨어, 내 마음의 문을 \n
그댄 내 머리 위의 우산 \n
그대의 그림자는 나의 그늘 \n
그댄 내 머리 위의 우산 \n
나의 곁에 \n
그대가 없기에 \n
나 창 밖에 우산을 들고 \n 
기다리던 그대, I cry \n
그대는 내 머리 위의 우산 \n
어깨 위에 차가운 비 내리는 밤 \n
내 곁에 그대가 습관이 돼버린 나 \n
난 그대 없이는 안 돼요. I need you back in my life \n
그대는 내 머리 위의 우산 \n
어깨 위에 차가운 비 내리는 밤 \n
내 곁에 그대가 없는 반쪽의 세상 \n
그대 나 없이는 안 돼요. Forever in the rain \n
버려진 우산 \n
버려진 우산 \n
I need you back \n
버려진 우산 \n
Without you \n
`


// 구현하기

function displayLyrics(str){
    lyricsEl.innerHTML = str
}

function highLightKeyword(e){
    const keyword = e.target.value

    if(keyword !== ''){
        const modifiedLyrics = lyrics
        .split(' ')
        .map(word => {
            if(word.toLowerCase().includes(keyword.toLowerCase())) return `<div class='highlight'>${word}</div>`
            else return word
        })
        .join(' ')

        displayLyrics(modifiedLyrics)
    }else{
        displayLyrics(lyrics)
    }
}

displayLyrics(lyrics)
searchEl.addEventListener('input', highLightKeyword)

사용자가 입력한 키워드와 좀 더 정확하게 찾는 해답은 아래와 같다. 알고리즘은 일단 찾은 인덱스값 앞까지 잘라내서 다른 변수에 담아주고, 찾은 인덱스부터 키워드 길이까지 잘라서 span 태그로 감싸준 다음에 문자열을 연결해준다. 그 다음에 시작점을 찾은 키워드 다음으로 옮겨준다. 그리고 다시 키워드를 검색한다. 다시 시작점부터 찾은 인덱스까지 잘라내서 문자열에 추가해주고, 찾은 인덱스부터 키워드 길이까지 잘라서 span 태그로 감싸준다. 이를 반복한다. \n 이 들어가 있으면 "빗물이 내 발목"처럼 띄워쓰기한 것은 제대로 검색되지 않기 때문에 \ 로 변경하였다. 

const lyrics = `
어느새 빗물이 \
내 발목에 고이고 \
참았던 눈물이 \
내 눈가에 고이고 I cry \
텅 빈 방엔 시계소리 \
지붕과 입 맞추는 비의 소리 \
오랜만에 입은 코트 주머니 속에 반지 \
손 틈새 스며드는 memory \
며칠 만에 나서보는 밤의 서울 \
고인 빗물은 작은 거울 \
그 속에 난 비틀거리며 아프니까 \
그대 없이 난 한 쪽 다리가 짧은 의자 \
둘이서 쓰긴 작았던 우산 \
차가운 세상에 섬 같았던 우산 \
이젠 너무 크고 어색해 \
그대 곁에 늘 젖어있던 왼쪽 어깨 (뭐해?) \
기억의 무게에 고개 숙여보니 \ 
버려진 듯 풀어진 내 신발끈 \
허나 곁엔 오직 비와 바람 \
(없다) 잠시라도 우산을 들어줄 사람 \
And I cry \
어느새 빗물이 \
내 발목에 고이고 \
참았던 눈물이 \
내 눈가에 고이고 I cry \
그대는 내 머리 위의 우산 \
어깨 위에 차가운 비 내리는 밤 \
내 곁에 그대가 습관이 돼버린 나 \
난 그대 없이는 안 돼요. Alone in the rain \
Alone in the rain, rain, rain \
Nothin' but pain, pain, pain \
Girl, I just want you to know \
Alone in the rain, rain, rain \
Nothin' but pain, pain, pain \
And I just can't let you go \
하늘의 눈물이 고인 땅 \
별을 감춘 구름에 보인 달 \
골목길 홀로 외로운 구두 소리 \
메아리에 돌아보며 가슴 졸인 맘 \
나를 꼭 닮은 그림자 \
서로가 서로를 볼 수 없었던 우리가 \
이제야 둘인가? 대답을 그리다 \
머릿속 그림과 대답을 흐린다 \
내 눈엔 너무 컸던 우산 \
날 울린 세상을 향해 접던 우산 \
영원의 약속에 활짝 폈던 우산 \
이제는 찢겨진 우산 아래 두 맘 \
돌아봐도 이젠 없겠죠 \
두 손은 주머니 속 깊게 넣겠죠 \
이리저리 자유롭게 걸어도 \
두 볼은 가랑비에도 쉽게 젖겠죠 \
난 열어놨어, 내 마음의 문을 \
그댄 내 머리 위의 우산 \
그대의 그림자는 나의 그늘 \
그댄 내 머리 위의 우산 \
나의 곁에 \
그대가 없기에 \
나 창 밖에 우산을 들고 \ 
기다리던 그대, I cry \
그대는 내 머리 위의 우산 \
어깨 위에 차가운 비 내리는 밤 \
내 곁에 그대가 습관이 돼버린 나 \
난 그대 없이는 안 돼요. I need you back in my life \
그대는 내 머리 위의 우산 \
어깨 위에 차가운 비 내리는 밤 \
내 곁에 그대가 없는 반쪽의 세상 \
그대 나 없이는 안 돼요. Forever in the rain \
버려진 우산 \
버려진 우산 \
I need you back \
버려진 우산 \
Without you \
`


// 구현하기
const input = document.getElementById('search')
const p = document.getElementById('lyrics')
p.innerHTML = lyrics

function setHighLight(){
  const userInput = input.value.trim().toLowerCase()
  const strLength = userInput.length
  let newInput = ''
  let start = 0

  if(!userInput){
    p.innerHTML = lyrics
    return 
  }
  
  let index = lyrics.indexOf(userInput)
  console.log(index)
  while(index != -1){

    newInput += lyrics.slice(start, index)
    
    newInput += `<span class="highlight">${lyrics.slice(index, index+strLength)}</span>`
    console.log(newInput)
    start = index+strLength
    index = lyrics.indexOf(userInput, index+strLength)
    console.log(index)
  }
  console.log(newInput)
  newInput += lyrics.slice(start)
  p.innerHTML = newInput
}


input.addEventListener('input', setHighLight)

이전에 검색과 정렬에서 사용한 함수와 reduce 메서드를 사용하면 아래와 같이 작성할 수 있다. 

const lyrics = `
어느새 빗물이 \
내 발목에 고이고 \
참았던 눈물이 \
내 눈가에 고이고 I cry \
텅 빈 방엔 시계소리 \
지붕과 입 맞추는 비의 소리 \
오랜만에 입은 코트 주머니 속에 반지 \
손 틈새 스며드는 memory \
며칠 만에 나서보는 밤의 서울 \
고인 빗물은 작은 거울 \
그 속에 난 비틀거리며 아프니까 \
그대 없이 난 한 쪽 다리가 짧은 의자 \
둘이서 쓰긴 작았던 우산 \
차가운 세상에 섬 같았던 우산 \
이젠 너무 크고 어색해 \
그대 곁에 늘 젖어있던 왼쪽 어깨 (뭐해?) \
기억의 무게에 고개 숙여보니 \ 
버려진 듯 풀어진 내 신발끈 \
허나 곁엔 오직 비와 바람 \
(없다) 잠시라도 우산을 들어줄 사람 \
And I cry \
어느새 빗물이 \
내 발목에 고이고 \
참았던 눈물이 \
내 눈가에 고이고 I cry \
그대는 내 머리 위의 우산 \
어깨 위에 차가운 비 내리는 밤 \
내 곁에 그대가 습관이 돼버린 나 \
난 그대 없이는 안 돼요. Alone in the rain \
Alone in the rain, rain, rain \
Nothin' but pain, pain, pain \
Girl, I just want you to know \
Alone in the rain, rain, rain \
Nothin' but pain, pain, pain \
And I just can't let you go \
하늘의 눈물이 고인 땅 \
별을 감춘 구름에 보인 달 \
골목길 홀로 외로운 구두 소리 \
메아리에 돌아보며 가슴 졸인 맘 \
나를 꼭 닮은 그림자 \
서로가 서로를 볼 수 없었던 우리가 \
이제야 둘인가? 대답을 그리다 \
머릿속 그림과 대답을 흐린다 \
내 눈엔 너무 컸던 우산 \
날 울린 세상을 향해 접던 우산 \
영원의 약속에 활짝 폈던 우산 \
이제는 찢겨진 우산 아래 두 맘 \
돌아봐도 이젠 없겠죠 \
두 손은 주머니 속 깊게 넣겠죠 \
이리저리 자유롭게 걸어도 \
두 볼은 가랑비에도 쉽게 젖겠죠 \
난 열어놨어, 내 마음의 문을 \
그댄 내 머리 위의 우산 \
그대의 그림자는 나의 그늘 \
그댄 내 머리 위의 우산 \
나의 곁에 \
그대가 없기에 \
나 창 밖에 우산을 들고 \ 
기다리던 그대, I cry \
그대는 내 머리 위의 우산 \
어깨 위에 차가운 비 내리는 밤 \
내 곁에 그대가 습관이 돼버린 나 \
난 그대 없이는 안 돼요. I need you back in my life \
그대는 내 머리 위의 우산 \
어깨 위에 차가운 비 내리는 밤 \
내 곁에 그대가 없는 반쪽의 세상 \
그대 나 없이는 안 돼요. Forever in the rain \
버려진 우산 \
버려진 우산 \
I need you back \
버려진 우산 \
Without you \
`


// 구현하기
const input = document.getElementById('search')
const p = document.getElementById('lyrics')
p.innerHTML = lyrics

function searchWord(keyword, n){
  const searchedIndexes = []
  let foundIndex = lyrics.indexOf(keyword)

  while(foundIndex != -1){
      searchedIndexes.push(foundIndex)
      foundIndex = lyrics.indexOf(keyword, foundIndex+n)
  }
  return searchedIndexes
}

function setHighLight(){
  const userInput = input.value.trim().toLowerCase()
  const strLength = userInput.length

  let newInput = ''
  let start = 0

  if(!userInput){
    p.innerHTML = lyrics
    return 
  }

  const searchedIndexes = searchWord(userInput, strLength)
  if(searchedIndexes.length > 0){
    newInput = searchedIndexes.reduce((newInput, index) => {
      newInput += lyrics.slice(start, index)
      newInput += `<span class="highlight">${lyrics.slice(index, index+strLength)}</span>`
      start = index+strLength
      return newInput
    }, newInput)
  
    newInput += lyrics.slice(start)
    p.innerHTML = newInput
    console.log('end')
  }
}


input.addEventListener('input', setHighLight)

 

* 연습과제 5

const commentInput = document.getElementById('user-comment-input') // 사용자 댓글 입력창
const userComments = document.getElementById('user-comments') // 사용자 댓글 리스트 출력

const submitBtn = document.getElementById('user-comment-add') //  사용자 댓글 추가 버튼
const comments = [] // 사용자 댓글목록 배열
const insults = ['shit', 'fuck', 'poop', 'dumb', '새끼', '놈', '똥', '씨발', '좇', '시발', '좆', '죽어', '뒤져', '병신', '년']

// 입력창 유효성 검증
function isValid(str){
    return str !== '' && str !== undefined
}

// 댓글 정보로부터 댓글에 대한 DOM 객체 생성 및 반환
function buildElement(comment){
    const commentEl = document.createElement('div')
    // 구현하기
    commentEl.className = 'comment'   
    commentEl.innerHTML = comment
    return commentEl
}
// users 배열을 이용하여 화면에 사용자 리스트 보여주기
function displayComments(comments){
    userComments.innerHTML = ''
    // 구현하기
    comments.forEach(comment => {
        userComments.appendChild(buildElement(comment))
    })
}

// 입력창 초기화
function initInput(){
    commentInput.value = ''
}

// 댓글 추가하기
function addComment(){
    const comment = commentInput.value

    if(comment !== ''){
        const modifiedComment = comment
                            .split(' ')
                            .map(word => {
                                console.log(word, insults.findIndex(insult => word.toLowerCase().includes(insult)))
                                if(insults.findIndex(insult => word.toLowerCase().includes(insult)) > -1) return '😊'
                                else return word
                            })
                            .join(' ')
        comments.push(modifiedComment)

        initInput()
        displayComments(comments)
    }else{
        alert('You need to give a comment !')
    }
}

submitBtn.addEventListener('click', addComment)

 

댓글에서 욕설을 걸어내는 코드

function replaceInsult2icon(comment, insult, icon){
  let foundIndex = comment.indexOf(insult)
  while(foundIndex != -1){
      comment = `${comment.slice(0, foundIndex)}${icon}${comment.slice(foundIndex+insult.length, comment.length)}`
      foundIndex = comment.indexOf(insult, foundIndex+1)
  }
  return comment
}
const insults = ['shit', 'fuck', 'poop', 'dumb', '새끼', '놈', '똥', '씨발', '좇', '시발', '좆', '죽어', '뒤져', '병신', '년']

let comment = '야이 씨발 좇같은 새끼야! 확 뒤져버려 ! 배신자shit임마shit임마좇같은임poop같은똥누는놈아'

insults.forEach(insult => comment = replaceInsult2icon(comment, insult, '😊'))
console.log(comment)

const insults = ['shit', 'fuck', 'poop', 'dumb', '새끼', '놈', '똥', '씨발', '좇', '시발', '좆', '죽어', '뒤져', '병신', '년']

const comment = '야이 씨발 좇같은 새끼야! 확 뒤져버려 ! 배신자shit임마shit임마좇같은임poop같은똥누는놈아'

const pureComment = insults.reduce((updatedComment, insult) => updatedComment.split(insult).join('😊'), comment)
console.log(pureComment)

function replaceInsult2icon(comment, insult, icon){
  let foundIndex = comment.indexOf(insult)
  while(foundIndex != -1){
      comment = `${comment.slice(0, foundIndex)}${icon}${comment.slice(foundIndex+insult.length, comment.length)}`
      foundIndex = comment.indexOf(insult, foundIndex+1)
  }
  return comment
}
const insults = ['shit', 'fuck', 'poop', 'dumb', '새끼', '놈', '똥', '씨발', '좇', '시발', '좆', '죽어', '뒤져', '병신', '년']

const comment = '야이 씨발 좇같은 새끼야! 확 뒤져버려 ! 배신자shit임마shit임마좇같은임poop같은똥누는놈아'

const pureComment = insults.reduce((updatedComment, insult) => replaceInsult2icon(updatedComment, insult, '😊'), comment)
console.log(pureComment)

function replaceInsult2icon(comment, insult, icon){
      let foundIndex = comment.indexOf(insult)
      while(foundIndex != -1){
          comment = `${comment.slice(0, foundIndex)}${icon}${comment.slice(foundIndex+insult.length, comment.length)}`
          foundIndex = comment.indexOf(insult, foundIndex+1)
      }
      return comment
    }
    const insults = ['shit', 'fuck', 'poop', 'dumb', '새끼', '놈', '똥', '씨발', '좇', '시발', '좆', '죽어', '뒤져', '병신', '년']

    const comment = `Yo, 늦은 저녁 안양 일 번가의 밤이 깊어가
      안주 좋은 적당한 술집을 찾아 안으로 들어가
      고기 한 점에 소주 한 잔이면 모든 게 족한
      시간을 보내던 중 일행의 남자 친구가 들어와
      소주 몇 잔을 걸치더니 의처증에 걸린 놈같이
      나를 추궁하는 모습이 심히 보기 안 좋아
      그만하라고 전했건만 귓구멍이 막혔나
      언성을 조금만 낮추면 나도 한 템포 참는다
      이봐 당신의 여자 친구는 오늘 처음으로 봤고
      오해할 이유도 없고 나의 여자도 있잖소
      설령 한번 준다고 해도 먹을 생각이 없으니
      술에 취했다면 어서 여자를 데리고 나가
      근데 이게 뭐야
      화장실을 다녀와 보니 내 친구를 건드려 hey
      화가 나면 내게 말해 이 좆같은 새끼야
      쓸데없이 엄한 데 가서 화풀이하지 말고
      이 새끼야 뒤져라 면상을 나는 발로 차고
      쓰러진 놈을 지지 발고 얼굴에 침을 뱉고
      대가리를 질질 끌고 식당 밖으로 나가
      차고 또 차고 나는 까고 또 까고
      원형탈모에 걸린 새끼 운 좋은 줄을 알아
      네 여자가 아니었음 병신이 될 뻔했다
      네 여자가 널 살렸어 무릎 꿇고 빌어
      담에 만날 땐 바지에 오줌 싸지나 마라
      그 후 나는 사과를 받고 잘못도 인정했고
      바로 서로 화해를 하고 전화번호를 주고
      치료비까지 보장하고 안양의 밤을 빠져나와
      그렇게 친구와 나는 집으로 돌아왔어
      차렷 열중쉬어 경례 이 새끼야
      네 엄마의 질 속으로 어서 다시 들어가
      차렷 열중쉬어 경례 이 새끼야
      여자 친구를 팔아먹는 버러지 같은 새끼
      차렷 열중쉬어 경례 이 새끼야
      네 엄마의 질 속으로 어서 다시 들어가
      차렷 열중쉬어 경례 이 새끼야
      여자 친구를 팔아먹는 버러지 같은 새끼
      다음날 바로 걸려온 전화는 억대의 합의를 제안
      멀쩡하게 돌아간 놈이 밤새 머리가 아파
      특실 병실에 드러누워
      이제는 아주 막 나가 broker들의 협박
      기자를 부르겠다며
      나를 혼란시키는 말재간이 만만치가 않아
      모든 죄는 인정하지만 그 돈은 줄 수가 없어
      남자답게 싸웠기에 멋지게 화해도 했어
      하지만 시간이 지날수록 계속되는
      건달들의 협박을 나는 못 이겨
      스스로 찾은 경찰서
      우리가 내민 진단서는 쳐다보지도 않고서
      작성이 된 진술서엔 진실이란 없어
      청탁을 받는 경찰 또한 이 땅엔 아직도 많아
      마약을 하는 연예인을 5명만 분다면
      지금 당장 이곳에서 풀어 줄 수도 있다
      좆 까라 이 새끼야 네 좆이나 빨아라
      그 후 나는 바로 캄캄한 유치장에 수감
      철창 안에 갇혀 나는 진짜 반성도 했어
      내가 지은 죄만큼만 벌 받길 원했어
      연예인이라는 감투 때문에 찾기 힘든 합의점
      철장 안의 밤은 쓸쓸하기만 한데
      차렷 열중쉬어 경례 이 새끼야
      네 엄마의 질 속으로 어서 다시 들어가
      차렷 열중쉬어 경례 이 새끼야
      여자 친구를 팔아먹는 버러지 같은 새끼
      차렷 열중쉬어 경례 이 새끼야
      네 엄마의 질 속으로 어서 다시 들어가
      차렷 열중쉬어 경례 이 새끼야
      여자 친구를 팔아먹는 버러지 같은 새끼
      가만두지 않겠어 유능한 변호사를 사서
      민사를 걸든 말든 나는 상관이 없어
      못 처먹고 못 배운 새끼 동냥했다 치면 되지 않겠어
      나는야 뭐든지 달게 받겠어
      우리 집 개도 미쳐 날뛰며 게거품 물어가며
      먹여주고 재워줬던 주인의 발을 무는데
      쓰레기 같은 새끼들은 모조리 다 조져놓고
      정신교육부터 다시 시작해야 돼
      제발 나 좀 놔둬 빡돌게 좀 하지 말고
      씨발 나도 개새끼들 착하게 좀 살자고
      개새끼들의 수급을 잘라 본보기를 보여주마
      절대로 내게 대응하지 마라
      쓸개를 씹어 먹는 나날이 참으로 많았다
      나의 복수심을 증폭시키지 마라
      화가 나면 내게 말해 이 좆같은 새끼야
      쓸데없이 엄한 데 가서 화풀이하지 말고
      뒤져라
      뒤져 이 개새끼야 (mother fucker)
      Mother fucker 이 개새끼 내 뒤통수를 때리는 개새끼
      너도 똑같아
      Mother fucker 씨발놈아`

    const pureComment = insults.reduce((updatedComment, insult) => replaceInsult2icon(updatedComment, insult, '😊'), comment)
    console.log(pureComment)

 

function replaceInsult2icon(comment, insult, icon){
      let foundIndex = comment.indexOf(insult)
      while(foundIndex != -1){
          comment = `${comment.slice(0, foundIndex)}${icon}${comment.slice(foundIndex+insult.length, comment.length)}`
          foundIndex = comment.indexOf(insult, foundIndex+1)
      }
      return comment
    }
    const insults = ['shit', 'fuck', 'poop', 'dumb', '새끼', '놈', '똥', '씨발', '좇', '시발', '좆', '죽어', '뒤져', '병신', '년']

    const comment = `
    Don't, don't worry 'bout
    Don't worry
    Don't worry
    Don't, don't worry 'bout me
    오지랖 떨지 말고 신경 꺼
    온 세상이 날 등져도 I don't give a fuck
    God is watchin' over me 나 죽을 일 없어
    내 걱정은 세상에서 제일 쓸데없는 짓
    부정적인 shit, man I ain't got time
    썸머소닉 to 코첼라, 글라스톤베리가 다음
    일상이 축제니까 감사하기도 바빠
    Middle finger to the Devil, stop fuckin' up my vibe!
    영화처럼 살았네
    역경이 상대역인데 웃으며 환영해
    그 정도는 돼야 내가 인생 연기를 해주잖냐
    보여줘야지, 사방이 아역들인데
    애들이 배우잖아
    내 혼을 베어다가 아낌없이 준 내 아티스트리
    다 남을 깎아내릴 때 난 나를 깎아 나눴지
    'Cause I am Groot motherfucker
    Ay mind yo fuckin' business 너는 내 걱정 안 해도 돼
    부러우면 그냥 부럽다고 말해도 돼
    네가 신경 안 써줘도 나는 잘 지내거든
    Don't you worry 'bout me
    You know I'm fly muthafucka
    Baby never give a fuck about a thang
    그게 나에 관한 거라면 더욱더 no thanks
    Baby never give a fuck about a thang
    내 걱정은 no thanks
    신경써줘서 고마워
    아가미 달린 시키 알아서 헤엄 치니
    Take care of yourself
    치킨 다리 먼저 겟할 걱정이나 해
    모지리 이미지야 이리 잘하니 zip your lips huh?
    대장인 척 해도 소화 못해 거기서 쳇기 쳇기
    쉬운 게 아니야, 무대는 'bout your 객기
    체크해 motherfuckers, my lyrics
    Motherfucker 만 써도 이젠 혐이라 하는 시대, shit
    Rhyme에 R도 모르는 대중은 프로듀서가 됐고
    농사짓는 울 삼촌은 거의 엔터 제작 대표
    조카는 음평가 태도
    내가 니 안줏거리지만 내가 느그 상사 느그 선생 아니듯이
    느그들이 누굴 평가하고 하면 띠꺼워
    내 사생활이 궁금하면 니가 내 엄마해 새꺄 알겠어?
    Ay mind yo fuckin' business 너는 내 걱정 안 해도 돼
    부러우면 그냥 부럽다고 말해도 돼
    네가 신경 안 써줘도 나는 잘 지내거든
    Don't you worry 'bout me
    You know I'm fly muthafucka
    Baby never give a fuck about a thang
    그게 나에 관한 거라면 더욱더 no thanks
    Baby never give a fuck about a thang
    내 걱정은 no thanks, ya
    경쟁은 관심 밖, 돌린 눈과 귀
    틈만 나면 찾고 있네, 다음 휴가지
    나이 들어 보니까 인생은 주관식
    남 보기보다 중요해, 내 삶이 둔 가치
    고이 무렵부터 내 갈 길을 걸어
    나도 안 한 내 걱정을 해준 분들 여럿
    덕분에 내 할 일에만 매진한 결과
    난 이제 돈과 시간 모두 몇 배를 더 벌어
    너 할 일 해, 시간이 돈인데
    다 먹고 살만한가 봐? 두 손 놀리네
    날 한 방 먹일 생각이면 좀 더 고민해
    대식가인 내겐 먹어봐야 겨우 요기인데
    난 물먹어도 절망 안에 배영
    잠수타도 14년째 곡이 배를 채워
    불통보다 소통이 더 유행이니까
    다 들어 줄게, 불만 있는 놈들 먼저 줄부터 세워 (걱정하지 말아요)
    야야 난 first class 양아치에 third class 연예인
    내 Hollywood style 연애는 엄마의 스트레스 원인
    삶은 계속되는 이별여행, 쉴틈없이 나는 꺼내
    이번 애인은 의사였으면 해, 정신병원에
    틈만 나면 한 눈 팔아, 나는 오급 장애죠
    나의 불행은 너의 행복, 그래 맘껏 즐겨줘
    망막 기증까진 오바야, 날 그만 걱정해줘
    나는 저 멀리 보고 살아, 한쪽으로도
    힙합씬은 여전히 내겐 오백의 삼십 사이즈
    내 영혼이 살기엔 너무 좆만해서 탄식 하
    나는 오로지 나의 존망만이 관심사
    욕을 존나 쳐먹어도 찌지 않아, 망신살
    "출근 안하는 CEO", "허슬 안하는 랩퍼"
    "내 거품 속에서 목욕하는 그녀들은 왜 예뻐?"
    성실한 이름들 사이에 이제 나는 못 껴
    난 시간에 쫒겨 살해당한 내 시체를 자주 목격
    앨범은 내 때가 되면 내, 비난은 발매가 되면 해
    기다려주는 팬들에게 미안해 기분 개같았는데
    돈도 좆도 안되는 대체 왜 너네가 negative?
    니 오빠 똥꼬나 더 긁어줘라 fuck your magnetic
    백날 씨부려대봤자 내 입만 아픔
    에픽 앨범에 난 똥을 싸질러놨구
    이건 내가 예전에 깠던 Born Hater Part 2
    일동 기립 박수 안 칠거면 내 얼굴에 칵 투
    Ay mind yo fuckin' business 너는 내 걱정 안 해도 돼
    부러우면 그냥 부럽다고 말해도 돼
    네가 신경 안 써줘도 나는 잘 지내거든
    Don't you worry 'bout me
    You know I'm fly muthafucka
    Baby never give a fuck about a thang
    그게 나에 관한 거라면 더욱더 no thanks
    Baby never give a fuck about a thang
    내 걱정은 no thanks
    You get one life
    나한테 낭비하지 마라
    Can I live my life?
    Let me live it how I wanna
    내 걱정은 no thanks (내 걱정은 no thanks)
    내 걱정은 no thanks (내 걱정은 no thanks)
    내 걱정은 no thanks (thank you)
    I am
    `

    const pureComment = insults.reduce((updatedComment, insult) => replaceInsult2icon(updatedComment, insult, '😊'), comment)
    console.log(pureComment)

 

* 연습과제 6

function truncate(str, maxlength) {
  return (str.length > maxlength) ?
    str.slice(0, maxlength - 1) + '…' : str;
}