JavaScript

[JQuery] 사이트 제목(title) 텍스트 가져오기

JQuery 사이트 제목(title) 내용 추출

간혹 웹사이트 특정 페이지에서 <title> 태그의 콘텐츠를 읽어들이고 싶은 경우가 있습니다. JQuery를 이용하면 이를 쉽게 구현할 수 있습니다.

가령 다음과 같은 페이지가 있다고 가정해보겠습니다.

<!DOCTYPE HTML>
<html lang="ko">
    <head>
        <title>JooTC 블로그</title>
        <meta charset="utf-8">
        <meta name="description" content="사이트 설명">
    </head>
    <body>
        <h1>안녕하세요. 블로그에 오신 것을 환영합니다.</h1>
        <p>(BODY 콘텐츠)</p>
    </body>
</html>

JQuery에서 $(document).find("title") 을 사용하면 document 셀렉터의 하위 객체인 title을 찾아서 선택합니다. 선택된 객체를 text() 함수를 사용하여 문자열을 가져오면 결과적으로 title 태그의 값인 사이트 제목을 가져올 수 있을 것입니다. 완성된 코드는 다음과 같습니다.

$(document).find("title").text();

이를 활용해서 웹페이지에 alert를 띄워보겠습니다.

var pageTitle = $(document).find("title").text();
alert(pageTitle);

문제없이 <title> 태그의 값에 대한 경고 창이 나타나고 있습니다.

JooTC

안녕하세요. 테크놀로지에 관심이 많은 블로거입니다.

View Comments

    • 확인 결과 문제 없이 작동하고 있는 것 같습니다. 혹시 다음과 같은 문제가 아닐까 싶습니다.

      - jQuery 스크립트가 로드되었는지 확인해보세요. jQuery 문법이 존재하는 스크립트 위쪽에서 로드되어야 합니다.
      - IE11에서 스크립트 실행이 차단되지 않았는지 확인해보세요. (차단된 콘텐츠 알림이 뜬다면 '차단된 콘텐츠 허용'을 클릭해야합니다.)
      - .find("title")을 올바르게 입력했는지 확인해보세요.

  • 좋은 글 감사합니다!
    현재 페이지와는 다른 페이지의 title태그말고 다른 태그의 내용을 알아내려면 어떻게ㅎ ㅏ면 좋을까요?

Recent Posts

[안드로이드] INSTALL_FAILED_INSUFFICIENT_STORAGE 해결

INSTALL_FAILED_INSUFFICIENT_STORAGE 문제 안드로이드 스튜디오에서 에뮬레이터를 실행하고 개발중인 애플리케이션을 실행하려 하면 로그 창에 아래와 같이 표시되면서…

5개월 ago

Zalgo 텍스트와 이를 방지하는 방법

인터넷 커뮤니티 사이트에서 게시글이나 댓글에 간혹 장난을 목적으로 작성된 특이한 글자를 볼 수 있습니다. 위…

7개월 ago

리눅스 kill, killall 명령어 – 특정 프로세스 종료하기

리눅스 명령어 - kill, killall 리눅스 kill 명령어는 특정 프로세스를 종료해주는 명령어입니다. 백그라운드에서 실행되고 있는…

7개월 ago

JavaScript typeof null이 ‘object’인 이유

JavaScript는 역사가 긴 스크립트 프로그래밍 언어입니다. 세월이 흐르면서 많은 자바스크립트 표준이 만들어졌고, 현재는 많은 문법적…

7개월 ago

Mocha Error: Resolution method is overspecified. 해결 방법

NodeJS 테스트 프레임워크인 Mocha는 비동기 테스트를 지원합니다. 간혹 특정 테스트 스크립트를 작성하고 실행하면 아래와 같이…

7개월 ago

윈도우 11 설치 시 Microsoft 계정 로그인 없이 로컬 계정 만들기

언제부턴가 윈도우 11을 처음 설치할 때 마이크로소프트(Microsoft) 계정 로그인을 강제로 요구하게 되었습니다. 물론 마이크로소프트 계정이…

1년 ago