웹페이지에서 특정 문자열을 치환하여 복사하고 싶은 경우, Clipboard.js를 사용할 수 있습니다. Clipboard.js는 클립보드에 내용을 복사하는 라이브러리이며, 복사한 내용에 대해서도 원하는 대로 처리할 수 있습니다.

Clipboard.js 설치하기

먼저, Clipboard.js를 설치해야 합니다. npm을 사용하는 경우, 다음과 같이 설치할 수 있습니다.

npm install clipboard

또는, CDN을 사용하여 스크립트를 가져올 수도 있습니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>

문자열 치환하기

Clipboard.js를 사용하여 웹페이지에서 복사한 내용의 특정 문자열을 치환하는 방법은 다음과 같습니다.

// 복사 버튼을 눌렀을 때 실행되는 함수
function copyText() {
  var originalText = document.getElementById('originalText').value; // 복사할 원본 텍스트
  var replacedText = originalText.replace('치환할문자열', '대체할문자열'); // 치환할 문자열을 대체할 문자열로 치환
  var clipboard = new ClipboardJS('.copyButton', {
    text: function() {
      return replacedText; // 치환된 텍스트를 클립보드에 복사
    }
  });
  
  clipboard.on('success', function(e) {
    console.log('복사 완료!');
  });
  
  clipboard.on('error', function(e) {
    console.log('복사 실패!');
  });
}

위 코드에서 originalText는 복사할 원본 텍스트를 나타냅니다. replacedText는 치환할 문자열을 대체할 문자열로 치환한 결과입니다. ClipboardJS 객체를 생성할 때 text 콜백 함수를 통해 치환된 텍스트를 클립보드에 복사하게 됩니다.

텍스트를 복사하고자 하는 버튼에 copyButton 클래스를 추가하고, copyText 함수를 연결해 주면 됩니다.

<input type="text" id="originalText" value="복사할 원본 텍스트">
<button class="copyButton" onclick="copyText()">복사</button>

이제 웹페이지에서 해당 버튼을 클릭하면, 원본 텍스트에서 치환할 문자열을 대체할 문자열로 치환하여 클립보드에 복사됩니다.

참고 자료

• Clipboard.js 라이브러리: https://clipboardjs.com/

위의 예제 코드와 참고 자료를 참고하여 웹페이지에서 복사한 내용의 특정 문자열을 치환하는 기능을 구현해 보세요!