JavaScript로 링크 앵커 텍스트의 첫 글자 제거하는 방법

웹 개발을 하다 보면 링크의 앵커 텍스트에 불필요한 문자가 포함되어 있는 경우가 있습니다. 이번 글에서는 JavaScript를 활용해 링크 텍스트의 첫 번째 문자를 손쉽게 제거하는 방법을 알아보겠습니다.

예를 들어, 아래와 같이 철자가 잘못 입력된 Aabout_us와 Hhome_page가 앵커 텍스트로 설정되어 있다고 가정해 보겠습니다.

이때 substring(1) 메서드와 innerHTML 속성을 함께 사용하면 첫 번째 문자를 제거하고, 각각 about_us와 home_page로 올바르게 표시할 수 있습니다.

전체 예제 코드

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/
4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="linkDemo">
<div>
<a href="">Aabout_us</a>
</div>
</div>
<div class="linkDemo">
<div>
<a href="">Hhome_page</a>
</div>
</div>
<script>
    [...document.querySelectorAll('.linkDemo div a')].forEach(obj=>
    obj.innerHTML=obj.innerHTML.substring(1))
</script>
</body>
</html>

코드 동작 원리

핵심 로직은 다음 한 줄입니다.

[...document.querySelectorAll('.linkDemo div a')].forEach(obj=>
obj.innerHTML=obj.innerHTML.substring(1))

document.querySelectorAll('.linkDemo div a'): linkDemo 클래스 내부의 모든 <a> 태그를 선택합니다.
[...](스프레드 연산자): NodeList를 배열로 변환하여 forEach를 사용할 수 있게 합니다.
substring(1): 문자열에서 인덱스 1부터 끝까지, 즉 첫 번째 문자를 제외한 나머지 부분을 반환합니다.
obj.innerHTML = ...: 처리된 문자열을 다시 해당 요소의 HTML 콘텐츠로 할당합니다.

실행 방법

위 프로그램을 실행하려면 파일 이름을 index.html 등으로 저장한 뒤, VS Code 편집기에서 파일을 마우스 오른쪽 버튼으로 클릭하고 'Open with Live Server' 옵션을 선택하면 됩니다.

실행 결과

프로그램을 실행하면 첫 번째 문자가 제거된 올바른 형태의 링크 텍스트가 화면에 출력됩니다.

JavaScript로 링크 앵커 텍스트의 첫 글자 제거하는 방법

마무리

이처럼 substring() 메서드를 활용하면 별도의 복잡한 로직 없이도 문자열의 특정 위치부터 원하는 부분만 추출할 수 있습니다. 참고로 ES2022 이상 환경에서는 slice(1)을 사용해도 동일한 결과를 얻을 수 있으며, 음수 인덱스를 지원하는 at() 메서드와 조합하면 더욱 유연한 문자열 처리가 가능합니다.