웹페이지에서 텍스트를 복사한 후에, 이를 라인별로 구분하여 처리하는 방법을 알아보겠습니다. 이를 위해 Clipboard.js라는 JavaScript 라이브러리를 사용할 것입니다.

Clipboard.js 소개

Clipboard.js는 복사 및 붙여넣기 동작을 처리하기 위한 간단하고 유용한 라이브러리입니다. 사용자가 복사한 내용을 클립보드에 저장하고, 개발자는 해당 내용을 JavaScript로 손쉽게 사용할 수 있습니다.

사용 방법

1. 먼저, Clipboard.js 라이브러리를 HTML 문서에 포함시킵니다. 복사 기능을 사용하고 싶은 요소에는 data-clipboard-text 속성을 추가합니다.

<script src="clipboard.min.js"></script>

<button data-clipboard-text="복사될 내용">복사</button>

1. JavaScript 코드에서 Clipboard 객체를 생성하고, 복사 버튼을 선택하여 클릭 이벤트를 추가합니다.

var clipboard = new ClipboardJS('button');

clipboard.on('success', function(e) {
    console.log('복사됨: ', e.text);
});

clipboard.on('error', function(e) {
    console.log('복사 실패');
});

1. 성공적으로 복사하는 경우 success 이벤트가 발생하고, 클립보드에 저장된 텍스트는 e.text로 얻을 수 있습니다. 복사가 실패한 경우 error 이벤트가 발생합니다.

웹페이지에서 복사한 내용의 라인 구분 처리하기

위의 코드를 기반으로, 웹페이지에서 복사한 내용의 라인을 구분하여 처리하는 방법을 알아보겠습니다.

var clipboard = new ClipboardJS('button');

clipboard.on('success', function(e) {
    var copiedText = e.text;
    var lines = copiedText.split('\n');
    
    for (var i = 0; i < lines.length; i++) {
        // 각 라인에 대한 처리 로직 구현
        console.log('라인 ' + (i + 1) + ': ' + lines[i]);
    }
});

clipboard.on('error', function(e) {
    console.log('복사 실패');
});

위의 코드에서는 복사된 텍스트를 split() 함수를 사용하여 개행 문자(\n)를 기준으로 라인으로 분리합니다. 그리고 각 라인에 대해 처리할 로직을 구현하여 출력하고 있습니다.

이제 웹페이지에서 복사한 내용을 라인별로 구분해 처리할 수 있는 코드를 작성하였습니다.

마치며

Clipboard.js를 사용하여 웹페이지에서 복사한 내용의 라인을 구분하여 처리하는 방법을 알아보았습니다. 이를 통해 사용자가 복사한 텍스트 데이터를 원하는 방식으로 쉽게 조작할 수 있습니다.

더 많은 기능과 사용법에 대해서는 Clipboard.js 공식 문서를 참고하시기 바랍니다.