JavaScript를 사용하여 제목을 URL Slug로 변환하는 방법은 무엇입니까?

개요

제목을 "Slugify"제목으로도 알려진 URL Slug로 변환하세요. URL 슬러그는 설명적이고 읽기 쉬운 제목입니다. 슬러그는 자체 설명적이므로 현재 페이지의 내용을 알려주는 페이지의 URL에 추가됩니다. 따라서 JavaScript를 사용하여 헤더를 슬러그로 변환하는 것은 toLowerCase(), replacement(), Trim()과 같은 특정 JavaScript 함수를 사용하여 수행할 수 있습니다.

알고리즘

• 1단계 - 두 개의 입력 태그가 포함된 HTML 페이지를 생성하고 각각 "title" 및 "urlSlug"로 id 속성을 추가합니다. 첫 번째 입력 요소는 사용자로부터 제목으로 입력을 받고 다른 레이블은 URL 슬러그. 또한 "convert()" 함수를 포함하는 onclick() 이벤트를 사용하여 HTML 버튼 ""을 만듭니다.

• 2단계 - 이제 HTML 페이지의 내부 JavaScript로 "convert()" 화살표 함수를 만듭니다.

으아악

• 3단계 - ID가 "document.getElementById("title")".value인 첫 번째 입력 태그의 값에 액세스하고 해당 값을 변수에 저장합니다.

으아악

• 4단계 - 문자열의 "toLowerCase()" 함수를 사용하여 제목에서 받은 값을 소문자로 변환합니다. "t"는 제목을 받는 변수입니다.

으아악

• 5단계 - 이제 "trim()" 함수를 사용하여 제목에서 앞뒤 공백을 제거합니다.

으아악

• 6단계 - 패턴과 함께 "replace()" 기능을 사용하여 제목의 모든 공백을 "-" 대시로 바꿉니다

으아악

• 7단계 - URL Slug가 준비되어 브라우저 화면에 표시됩니다.

으아악

예

이 예에서는 사용자로부터 제목을 입력으로 받습니다. 사용자가 제목을 입력하고 버튼을 클릭하면 제목 값을 소문자로 변경한 다음 제목의 앞뒤 공백을 모두 소문자로 변경하는 Convert() 함수가 트리거됩니다. 그러면 주어진 제목에서 공백이 대시(-)로 바뀌고 URL 슬러그가 브라우저의 읽기 전용 입력 태그에 표시됩니다.

으아악

위 예시의 출력에서 ​​사용자가 입력한 제목은 "Tutorial Point Article"입니다. "지금 변환"을 클릭하면 제목이 URL 슬러그(예: "튜토리얼 포인트 기사")로 변환됩니다. Trim() 함수를 사용하여 후행 공백을 제거하고 하이픈으로 바꿉니다.

결론

Uniform Resource Locator(URL) 슬러그는 페이지의 검색 순위를 높이는 데 도움이 됩니다. 따라서 URL 슬러그는 URL에 있어야 하며, URL에 있는 단어는 모두 소문자이므로 제목도 먼저 소문자로 변환됩니다. URL의 슬러그를 조심하려면 기사, 블로그 또는 웹사이트의 기타 콘텐츠를 가져와 URL의 끝점을 관찰하세요. 문장에 나타나는 경우 위의 예와 동일하게 끝납니다.

위 내용은 JavaScript를 사용하여 제목을 URL Slug로 변환하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!