> 웹 프론트엔드 > 프런트엔드 Q&A > 자바스크립트 한 줄씩 삭제

자바스크립트 한 줄씩 삭제

WBOY
풀어 주다: 2023-05-22 12:45:37
원래의
599명이 탐색했습니다.

JavaScript는 프런트 엔드 개발에 널리 사용되는 프로그래밍 언어로, 페이지 상호 작용과 동적 효과를 매우 잘 구현할 수 있습니다. 일부 특정 기능을 구현할 때 행을 삭제하는 문제에 직면하게 됩니다. 이 기사에서는 JavaScript에서 한 줄씩 삭제를 구현하는 방법을 소개합니다.

1. 텍스트 콘텐츠 가져오기

먼저 작업할 텍스트 콘텐츠를 가져와야 합니다. JavaScript에서는 텍스트 영역, 입력 및 기타 태그를 사용하여 텍스트 입력을 얻을 수 있습니다. 여기서는 textarea 태그를 예로 사용합니다.

<textarea id="text"></textarea>
로그인 후 복사

텍스트 상자의 내용은 태그의 id 속성을 통해 얻을 수 있습니다.

var text = document.getElementById("text").value;
로그인 후 복사

2. 텍스트 분할

다음으로 텍스트 내용을 분할해야 합니다. 한 줄씩 분할( ) 함수를 사용합니다.

var lines = text.split('
');
로그인 후 복사

이 예에서는 개행 문자 "
"를 구분 기호로 사용합니다. 즉, 텍스트 내용이 개행 문자에 따라 여러 줄로 구분되어 행이라는 배열에 저장됩니다.

3. 특정 행 삭제

다음으로 삭제해야 할 행에 대해 작업을 수행할 수 있습니다. 예를 들어, 이제 3행의 내용을 삭제하려면 splice() 함수를 사용할 수 있습니다.

lines.splice(2,1);
로그인 후 복사

이 예제에서 splice() 함수의 첫 번째 매개변수 "2"는 삭제할 행 수를 나타내고, 두 번째 매개변수 "1"은 삭제할 행 수를 나타냅니다. 이런 식으로 3행의 내용이 삭제됩니다.

4. 텍스트 결합

마지막으로 수정된 텍스트를 다시 결합해야 합니다. 즉, 배열의 각 텍스트 줄을 완전한 문자열로 연결해야 합니다.

var newText = lines.join("
");
로그인 후 복사

이 예에서는 Join() 함수를 사용하여 행 배열의 모든 행을 문자열로 재결합하고 개행 문자 "
"를 구분 기호로 사용합니다.

5. 원본 콘텐츠 교체

마지막으로 수정된 텍스트를 원본 텍스트 상자로 교체합니다.

document.getElementById("text").value = newText;
로그인 후 복사

이런 방식으로 텍스트를 한 줄씩 삭제하는 작업을 구현했습니다.

전체 코드는 다음과 같습니다.

<textarea id="text"></textarea>

<script>
function deleteLine() {
    var text = document.getElementById(&quot;text&quot;).value;
    var lines = text.split('
');
    lines.splice(2,1);
    var newText = lines.join(&quot;
&quot;);
    document.getElementById(&quot;text&quot;).value = newText;
}
</script>
로그인 후 복사

위는 JavaScript를 사용하여 한 줄씩 텍스트를 삭제하는 방법입니다. 이 방법은 줄 바꿈 문자 "
"로 구분된 텍스트에서만 작동합니다. 다른 구분 기호를 사용하는 경우 이에 따라 수정해야 합니다.

위 내용은 자바스크립트 한 줄씩 삭제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿