Javascript(자바스크립트)를 이용한 HTML 기사 본문 추출 방법

뉴스 기사 웹페이지에서 기사 제목과 기사 내용을 Javascript (자바스크립트) 만을 이용하여 추출해 보았습니다.

1. 기사 제목 추출 알고리즘은 간단하였기제 제가 직접 구현 하였습니다.

2. 기사 내용 추출 알고리즘은 '한국항공대 대학원'에서 작성한 

'작은 화면에서의 효율적인 웹 브라우징을 위한 웹 페이지 본문 추출 방법 / 김재은 (2011.2)' 

논문을 참고하여 구현하였습니다.

기사제목 추출 알고리즘

1) 원리 : 

가. 대부분의 뉴스 기사 HTML 웹페이지의 <Title> 태그는 [기사제목 + 신문사] 형태를 취한다.

나. 대부분의 기사 제목은 h 태그를 사용한다.

다. 가의 값과 나의 값들을 비교하였을 때, 일치율이 가장 높은 것이 기사 제목이다.

2) 알고리즘:

1. 뉴스 기사 HTML 웹페이지에서 <Title> 태그 값을 가져옵니다.

2. 1번에서 가져온 태그 값에서 ” 문자를 " 으로 치환해 줍니다.

특수문자 쌍따옴표를 기본 쌍따옴표로 치환

3. 2번에서 가져온 태그 값을 URI 주소 방식으로 Encoding(인코딩) 합니다.

※ 인코딩 해주는 이유 : <Title> 태그 값은 기사 제목의 정확도를 높이기 위해 다른 Tag(태그) 값들과 비교하게 되는데 인코딩 없이 비교할 경우 화면상에 표시 되지 않는 특수문자들에 의해 비교가 잘 되지 않는 경우가 있다. 따라서, 인코딩 절차를 통해 비교하는 문자열들의 표기 방식을 일치 시켜준다.

4. 뉴스 기사 HTML 웹페이지에서 h1, h2, h3, h4, h5 ,h6 태그값들을 모두 가져온다.

5. 4번 과정에서 가져온 태그 값에서 ” 값을 " 으로 치환해 줍니다.

6. 5번 과정의 태그 값에서 문자열 앞, 뒤의 공백을 제거 해줍니다. 

   (자바스크립트의 정규식과 replace 함수를 이용하여 제거해 줍니다.)

7. 6번 과정의 태그 값을 3번 URI 주소 방식으로 Encoding(인코딩) 합니다.

8. 3번 과정의 태그 값과 7번의 태그들의 값을 비교하여 일치율을 조사합니다.

3번 과정의 태그값이 7번 과정의 태그값을 포함할때,

일치율 : [3번 태그값 / 7번 태그값] 또는 [7번 태그값/3번 태그값]

3번 7번 태그값 중 length(길이)가 긴 태그가 분자에 오면 됩니다. 

9-1. 7번의 태그값들 중 일치율이 가장 높은 태그가 기사 제목이 됩니다.

9-2. 일치하는 태그 값이 없을 시에는 3번 과정의 값이 기사 제목이 됩니다.

예제 코드 : 

Article이라는 ID를 가진 엘리먼트 내부에 뉴스기사 웹페이지가 들어있고 여기서 제목을 추출 한 뒤, Play_Title 이라는 ID를 가진 엘리먼트 내부에 기사 제목을 넣어준다.

기사 제목 추출 예제 코드

function extract_Title()
{
    var title, encoded_title, items, max_matching_rate=0;
	
    //1. 뉴스 기사 웹페이지에서 title 태그의 엘리먼트를 가져온다.
	title = document.getElementById("Article").querySelectorAll("title");

    // 2. 특수문자 쌍따옴표를 기본 쌍따옴표로 치환한다.
	// 예시 뉴스기사 중앙일보 http://joongang.joins.com/article/886/12941886.html?ctg=1300
	title = title[0].innerHTML.replace('”','"');
	title = title.replace('”','"');
	
	//console.log("Title 태그값: " + title);

    // 3. URI 주소 방식으로 인코딩 한다.
	encoded_title = encodeURI(title);

    // 4. 뉴스 기사 HTML 웹페이지에서 h1, h2, h3, h4, h5, h6 태그값들을 모두 가져온다.
	items = document.querySelectorAll("h1, h2, h3, h4, h5, h6, span");	//span for 매일경제 

	for(var i=0; i<items.length; i++)
	{
        // 5. 4번 과정에서 가져온 태그 값에서 특수문자 쌍따옴표를 기본 쌍따옴표로 치환한다.
		var filtered_item = items[i].innerHTML.replace('”','"');
		filtered_item = filtered_item.replace('”','"');
		
		// 6. 문자열 앞뒤 공백을 제거 한다.
		filtered_item = filtered_item.replace(/^\s*|\s*$/g, '');
		
		//console.log("Items 태그값: "+filtered_item);
		
	    // 7.URI 주소 방식으로 인코딩 한다.
		var encoded_item = encodeURI(filtered_item);

        // 8-1. 3번 과정과의 값과 7번 과정의 값을 비교한다.
		if(encoded_title.match(encoded_item)&&(items[i].innerHTML.length > 1))
		{
			//현재 index의 매칭율
			var current_matching_rate;
			
		    //8-2. 3번 과정의 태그 값과 7번의 태그들의 값을 비교하여 일치율을 조사합니다.
			if(encoded_item.length >= encoded_title.length){
				current_matching_rate = encoded_title.length/encoded_item.length;
			}else{
				current_matching_rate = encoded_item.length/encoded_title.length;
			}
			
			//console.log("현재값 매칭율: "+current_matching_rate);
			
            //9. 일치율이 가장 높은 태그가 기사 제목이 됩니다.
			if(current_matching_rate >= max_matching_rate)
			{
				max_matching_rate = current_matching_rate;
				title = items[i].innerHTML;
			}		
		}
		else{
			//console.log("Miss Matching :" + items[i].innerHTML + '|'+items[i].innerHTML.length);
		}
	}

	console.log("extract_Title(): 추출된 제목의 매칭율: "+ max_matching_rate);
	console.log("extract_Title(): 추출된 제목: " + title);
	
	document.getElementById("Play_Title").innerHTML ='';
	document.getElementById("Play_Title").innerHTML += '<h3>' + title + '</h3>';	
}

기사본문 추출 알고리즘

1) 원리 : 

가. 전체 태그 중 텍스트 블록의 길이가 가장 긴 값을 가지며 자식 태그의 숫자가 가장 적은 태그가 

나.