어제 오늘 내일

지난 번에는 사용자가 로컬에서 파일을 선택하고, 그 파일 내용을 읽어오는 방법을 알아보았습니다. [HTML] input type='file' 속성 알아보기 ( 파일 입력 ) [HTML] input type='file' 속성 알아보기 ( 파일 입력 ) 웹페이지에서 사용자의 로컬 파일을 입력받기 위해서는 다음과 같이 input 태그의 type속성을 file로 지정하는 방법을 사용합니다. See the Pen read file by anna (@hianna) on CodePen. 여기에서는 input의 type.. hianna.tistory.com [Javascript] 로컬 텍스트 파일 읽기 (다중 파일 선택) [Javascript] 로컬 텍스트 파일 읽기 (다중 파일 선택) HTML/Javascrip로 로..

HTML/Javascrip로 로컬 텍스트 파일을 읽어서 선택한 파일에 대한 정보 (파일명, 파일크기 등)을 보여주는 코드입니다. Ctrl / Shift 키를 사용하여 여러개의 파일을 선택할 수 있습니다. See the Pen read file by anna (@hianna) on CodePen. HTML input의 type 속성을 file로 지정하면 파일을 입력 받을 수 있습니다. accept 속성을 지정하여, 입력받는 파일의 종류를 지정할 수 있습니다. 여기서는 확장자가 'txt'인 파일을 선택할 수 있도록 했습니다. multiple 속성을 지정하면, ctrl/shift 키를 사용하여 다수의 파일을 선택할 수 있습니다. 자세한 속성은 다음 링크를 참조하세요. [HTML] input type='file..

Javascript에서 문자열을 치환하기 위해서 replace() 함수를 사용하는 방법을 알아보았습니다. 그런데, replace() 함수는 문자열에서 변경하려는 문자열이 여러 번 반복될 경우, 첫 번째로 발견한 문자열만 치환해 줍니다. 즉, 'apple, banana, banana' 이렇게 'banana'가 여러 번 반복될 경우 replacT('banana', 'tomato')를 실행하면 첫번째로 발견된 'banana'만 치환되어 'apple, tomato, banana'의 결과를 얻게 됩니다. [Javascript] 문자열에서 특정 문자열 치환하기 (replace) 이번에는, 문자열 내에서 찾아낸 모든 문자열(변경하려는)을 치환하는 방법을 알아보도록 하겠습니다. 간단하게 replactAll() 이라는 ..

지난 번 포스팅에서 replace() 함수를 사용하여 특정 문자열을 치환하는 방법을 알아보았습니다. [Javascript] 문자열에서 특정 문자열 치환하기 (replace) 그런데, replace() 함수는 대소문자를 구분합니다. 따라서, 'Banana'와 'banana'는 서로 다른 문자열로 인식합니다. 이번에는, replace() 함수를 이용하여 대소문자 구분없이 문자열을 치환하는 방법을 알아보도록 하겠습니다. 대소문자 구분없이 문자열을 치환하는 방법 See the Pen replace by anna (@hianna) on CodePen. 대소문자의 구분없이 문자열을 치환하기 위해서 정규식(regular expression)을 사용하였습니다. 정규식으로 찾으려는 문자열은 '/'로 감싸서, 파라미터로 ..

Javascript의 문자열에서 '특정 문자열'을 찾아서 '치환'해주는 방법을 알아보도록 하겠습니다. 문자열 내의 특정 문자열을 치환해 주기 위해서 Javascript에서는 replace() 함수를 사용합니다. replace() string.replace(searchValue, newValue) replace() 함수는 searchValue, newValue를 파라미터로 입력받고 문자열에서 searchValue를 찾아서 newValue로 치환합니다. 예제를 보면서, 사용 방법을 알아보도록 하겠습니다. replace() 함수 사용하기 See the Pen replace by anna (@hianna) on CodePen. replace() 함수를 사용하여, 문자열을 치환하는 간단한 예제입니다. 예제에서는 ..

string.slice(start, end) Javascript에서 substr(), substring(), slice() 함수는 모두 문자열을 잘라주는 역할을 합니다. 이 함수들은 모두 비슷하지만, 조금씩 작동 방법이 다릅니다. 이 세가지 함수를 비교해 보도록 하겠습니다. substr() string.substr(start, length) substr() 함수는, 파라미터로 입력받은 start index부터 length 길이만큼 string을 잘라내어 반환하는 함수입니다.. 첫번째 글자의 index는 0에서 시작합니다. See the Pen 첫번째-마지막문자 by anna (@hianna) on CodePen. 위 예제에서 첫번째 글자 하나를 가져오기 위해서 start=0, length=1을 파라미터로..

Javascript 문자열에서 첫번째 글자 또는 마지막 문자를 가져오는 4가지 방법을 살펴보겠습니다. charAt() 함수를 이용하기 See the Pen 첫번째-마지막문자 by anna (@hianna) on CodePen. 첫번째 문자, 마지막 문자 또는 원하는 index의 글자를 확인하기 위해서 charAt() 함수를 사용하였습니다. charAt() 함수는, 전달된 파라미터의 index에 위치한 글자를 리턴합니다. 첫번째 글자의 index는 0부터 시작합니다. 따라서 마지막 글자의 index는 전체 문자열의 길이 - 1 입니다. 그래서, 위의 예제에서는 마지막 글자의 index를 구하기 위해 str.length - 1 을 사용하였습니다. ( 전체 문자열의 길이를 구하는 방법은 [Javascript]..

Javascript의 문자열에서 공백을 제거하는 방법을 알아보도록 하겠습니다. 문자열의 앞뒤 공백 제거하기(1) - trim() 함수 See the Pen 공백제거 by anna (@hianna) on CodePen. 문자열의 앞뒤에 있는 공백을 없애기 위해서는 trim() 함수를 사용합니다. 문자열의 앞뒤 공백 제거하기(2) - replace() 함수와 정규식 브라우저에 따라서 trim() 함수가 동작하지 않는 경우가 있습니다. 이런 경우에는 replace() 함수와 정규식을 사용하여 앞뒤의 공백을 제거할 수 있습니다. See the Pen 공백제거 by anna (@hianna) on CodePen. 문자열의 모든 공백 제거하기 See the Pen 공백제거 by anna (@hianna) on Co..

Javascript에서 문자열의 길이를 체크하는 방법을 알아보도록 하겠습니다. length 속성 사용하기 See the Pen 문자열 길이 by anna (@hianna) on CodePen. Javascript에서는 문자열의 길이를 length 속성을 통해 구할 수 있습니다. 문자열의 length 속성은 문자열에서 문자의 갯수를 return 합니다. 공백의 경우에도 한개의 문자로 인식하여 length에 포함시킵니다. 또한, 마지막 예제처럼 empty string의 경우에는 0을 리턴합니다.

문자열 안에서 쌍따옴표, 홑따옴표를 처리하는 방법을 알아보겠습니다. Javascript 안에서 문자열은 쌍따옴표(") 또는 홑따옴표(') 안에 표시합니다. 그렇다면 문자열 안에 따옴표를 표시하려면 어떻게 해야 할까요? let str = ""안녕하세요?""; // error 위와 같이 따옴표로 감싼 문자열 안에, 그대로 따옴표를 사용하면 에러가 발생합니다. 문자열 안에서 따옴표를 표시하기 위한 3가지 방법을 소개합니다. 문자열에 표시하려는 따옴표와 다른 따옴표로 문자열 표현하기 See the Pen 따옴표 by anna (@hianna) on CodePen. 가장 간단한 방법으로 만약 문자열에 '홑따옴표(')'를 표시하고 싶다면, 문자열을 쌍따옴표(")로 감싸서 표시하면 되고, 문자열에 '쌍따옴표(")를 ..