찾다
웹 프론트엔드JS 튜토리얼지능형 문자열 약어

Intelligent String Abbreviation

코어 포인트

JavaScript의 함수는 문자열을 지능적으로 지정된 최대 길이로 단축시켜 단어의 중간에서 깨지지 않고 불필요한 공간을 제거합니다.

이 함수는 원래 입력 문자열, 최대 출력 길이 및 옵션 접미사의 세 가지 매개 변수를 사용하여 약어 문자열의 끝에 추가됩니다. 접미사가 정의되지 않으면 기본값은 "..."이며 약어를 나타냅니다.
    이 기능은 문자열 길이가 제한되어야하는 모든 시나리오에서 사용하여 양식 입력 처리, 사용자 정의 툴팁 작성, 웹 기반 이메일 목록에 메일 주제 표시 또는 AJAX를 통해 전송 될 예전 데이터를 전처리하는 것과 같은 시나리오에서 사용할 수 있습니다.
  • 이 함수의 효과는 입력 문자열을 단일 단어로 분할 한 다음 최대 길이에 맞게 가능한 한 많은 단어를 재결합 할 수 있다는 것입니다. 또한 초과 공간을 제거하기위한 입력을 전처리합니다. abbreviate()
  • 이 기사는
  • 라는 간단하고 효율적인 JavaScript 함수를 소개합니다. 그의 주요 함수는 이름입니다. 문자열을 지정된 길이로 지능적으로 단축시킵니다. 그것은 단어의 중간에 잘리지 않도록하고 과도한 공간을 제거하기 위해 문자열을 전처리합니다. 다음은
  • 함수의 코드입니다.
  • 이 함수는 원래 입력 문자열, 최대 출력 길이 및 옵션 접미사의 세 가지 매개 변수를 사용하여 약어 문자열의 끝에 추가됩니다. 접미사가 정의되지 않으면 기본값은 "..."(하나의 공간과 3 개의 점)입니다. 일반적이고 쉽게 인식 가능한 약어 표시입니다.
  • 기능 사용
  • 이 함수는 간단한
  • 표현식에 대한 더 똑똑한 대안으로 문자열 길이가 제한되어야하는 모든 시나리오에서 사용할 수 있습니다. 양식 입력 처리, 사용자 정의 툴팁 작성, 웹 기반 이메일 목록에 메일 주제 표시 또는 AJAX를 통해 전송 될 예전 데이터와 같은 많은 응용 프로그램이 있습니다. 예를 들어, 문자열을 100 자로 제한하고 기본 접미사를 추가하려면 다음과 같이 호출 할 수 있습니다.
이것은이

표현과 개념적으로 동일합니다 abbreviate() 그러나 이것은 종종 단어의 중간에 출력 문자열이 깨지기 때문에 매우 거친 접근법입니다. 함수는이 작업을 수행하지 않도록 설계되었으며, 단어의 중간에 쪼개지는 대신 마지막 단어 abbreviate 앞에 문자열을 분할합니다. 따라서 에 의해 생성 된 출력 문자열은 일반적으로 에 의해 지정된 최대 길이보다

가 짧지 만 그보다 길지는 않습니다. 이 기능은 또한 약어 접미사에 필요한 공간, 즉 지정된 최대 길이가 100이지만 접미사 자체가 4 자이면 기본 입력 문자열의 최대 96 자만 사용할 수 있습니다. 빈 문자열을 전달하여 접미사가 없음을 지정하거나 태그 문자열을 약화하려면 HTML 닫기 태그로 정의 할 수 있습니다. 예를 들어, 다음 입력 :
function abbreviate(str, max, suffix) {
  if ((str = str.replace(/^\s+|\s+$/g, '').replace(/[\r\n]*\s*[\r\n]+/g, ' ').replace(/[ \t]+/g, ' ')).length <= max) {
    return str;
  }

  var
    abbr = '',
    str = str.split(' '),
    suffix = (typeof suffix !== 'undefined' ? suffix : ' ...'),
    max = (max - suffix.length);

  for (var len = str.length, i = 0; i < len; i++) {
    if ((abbr + str[i]).length <= max) {
      abbr += str[i] + ' ';
    } else {
      break;
    }
  }

  return abbr.replace(/[ ]$/g, '') + suffix;
}

는이 출력을 생성합니다

function abbreviate(str, max, suffix) {
  if ((str = str.replace(/^\s+|\s+$/g, '').replace(/[\r\n]*\s*[\r\n]+/g, ' ').replace(/[ \t]+/g, ' ')).length <= max) {
    return str;
  }

  var
    abbr = '',
    str = str.split(' '),
    suffix = (typeof suffix !== 'undefined' ? suffix : ' ...'),
    max = (max - suffix.length);

  for (var len = str.length, i = 0; i < len; i++) {
    if ((abbr + str[i]).length <= max) {
      abbr += str[i] + ' ';
    } else {
      break;
    }
  }

  return abbr.replace(/[ ]$/g, '') + suffix;
}
기능의 작동 방식

함수의 핵심은 입력 문자열을 단일 단어로 분할 한 다음 가능한 많은 단어를 최대 길이에 맞게 재결합하는 기능입니다. 보다 효율적으로, 우리는 단어 사이의 분리기를 예측할 수 있는지 확인해야하며, 가장 쉬운 방법은 내부 공간을 최소화하는 것입니다 - 신생과 탭을 공백으로 변환 한 다음 각 내부 공간이 공간이되도록 연속 공간을 줄입니다. . 물론, 이것을 다루는 다른 방법이 있습니다. 예를 들어, 우리는 단어 사이에서 찾을 수있는 모든 다른 유형의 문자를 고려하여 세분화에 대한보다 유연한 정규 표현을 정의 할 수 있습니다. 정규 표현식에는 단어 경계 문자 ( "B")도 있으므로 사용할 수 있습니다. 그러나 특히 사용자 입력을 처리 할 때 우주 전처리 자체가 유용하다는 것을 알았습니다. 그리고 단어 경계로 분할하면 대시, 점, 쉼표 및 대부분의 특수 문자가 실제로 단어 경계로 간주되기 때문에 예상 결과가 발생하지 않습니다. 그러나 캐릭터가 공백을 따라 가지 않는 한 문장 부호로 단어를 나누는 것은 부적절하다고 생각합니다. 따라서 기능의 첫 번째 작업은 우주 전처리를 수행하는 것입니다. 결과 가 이미 로 지정된 최대 값보다 이미 짧은 경우 다음을 직접 반환 할 수 있습니다.

우리가 이것을하지 않으면, 우리는 줄을 약화 할 필요가 없을 때 줄이 약화되는 상황을 만날 수 있습니다.

첫 번째 조건이없는 경우, 지정된 최대 값은 접미사의 길이를 고려해야하기 때문에 약어의 출력을 얻게됩니다. abbreviate 첫 번째 조건을 추가하면 수정되지 않은 출력이 생성됩니다. 따라서이 시점에서 돌아 오지 않는 한, 약식 문자열을 계속 컴파일합니다. 입력 문자열을 공간별로 분할하여 단일 단어를 생성 한 다음 약어가 더 짧은 한 각 단어 공간 쌍을 반복적으로 재편성합니다. 지정된 최대 길이보다. 우리가 필요한 것을 컴파일하면 반복을 깨뜨린 다음 약어 문자열 끝에서 나머지 공간을 다듬은 다음 접미사를 추가하고 결과를 반환 할 수 있습니다. 나머지 공간을 오른쪽 끝에서 다듬은 다음 기본 접미사로 추가하면 약간의 낭비가 보이지만 공백없이 접미사를 입력 할 수 있습니다. 결론

str = abbreviate(str, 100);
이것은 과도한 공간을 제거하기 위해 입력을 전처리하는 간단하지만 스마트 문자열 약어 기능입니다. 내 경험상, 두 요구 사항 모두 동시에 나타나기 때문에이 기능을 이런 식으로 개발하도록 개발했습니다.

(FAQ 부분은 공간 제한으로 인해 여기서 생략됩니다. 필요한 경우, FAQ 부품의 의사 원리 버전을 별도로 제공 할 수 있습니다.)

위 내용은 지능형 문자열 약어의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
Python vs. JavaScript : 작업에 적합한 도구 선택Python vs. JavaScript : 작업에 적합한 도구 선택May 08, 2025 am 12:10 AM

Python 또는 JavaScript를 선택할지 여부는 프로젝트 유형에 따라 다릅니다. 1) 데이터 과학 및 자동화 작업을 위해 Python을 선택하십시오. 2) 프론트 엔드 및 풀 스택 개발을 위해 JavaScript를 선택하십시오. Python은 데이터 처리 및 자동화 분야에서 강력한 라이브러리에 선호되는 반면 JavaScript는 웹 상호 작용 및 전체 스택 개발의 장점에 없어서는 안될 필수입니다.

파이썬 및 자바 스크립트 : 각각의 강점을 이해합니다파이썬 및 자바 스크립트 : 각각의 강점을 이해합니다May 06, 2025 am 12:15 AM

파이썬과 자바 스크립트는 각각 고유 한 장점이 있으며 선택은 프로젝트 요구와 개인 선호도에 따라 다릅니다. 1. Python은 간결한 구문으로 데이터 과학 및 백엔드 개발에 적합하지만 실행 속도가 느립니다. 2. JavaScript는 프론트 엔드 개발의 모든 곳에 있으며 강력한 비동기 프로그래밍 기능을 가지고 있습니다. node.js는 풀 스택 개발에 적합하지만 구문은 복잡하고 오류가 발생할 수 있습니다.

JavaScript의 핵심 : C 또는 C에 구축 되었습니까?JavaScript의 핵심 : C 또는 C에 구축 되었습니까?May 05, 2025 am 12:07 AM

javaScriptisNotBuiltoncorc; it'SangretedLanguageThatrunsonOngineStenWrittenInc .1) javaScriptWasDesignEdasAlightweight, 해석 hanguageforwebbrowsers.2) Endinesevolvedfromsimpleplemporectreterstoccilpilers, 전기적으로 개선된다.

JavaScript 응용 프로그램 : 프론트 엔드에서 백엔드까지JavaScript 응용 프로그램 : 프론트 엔드에서 백엔드까지May 04, 2025 am 12:12 AM

JavaScript는 프론트 엔드 및 백엔드 개발에 사용할 수 있습니다. 프론트 엔드는 DOM 작업을 통해 사용자 경험을 향상시키고 백엔드는 Node.js를 통해 서버 작업을 처리합니다. 1. 프론트 엔드 예 : 웹 페이지 텍스트의 내용을 변경하십시오. 2. 백엔드 예제 : node.js 서버를 만듭니다.

Python vs. JavaScript : 어떤 언어를 배워야합니까?Python vs. JavaScript : 어떤 언어를 배워야합니까?May 03, 2025 am 12:10 AM

Python 또는 JavaScript는 경력 개발, 학습 곡선 및 생태계를 기반으로해야합니다. 1) 경력 개발 : Python은 데이터 과학 및 백엔드 개발에 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 적합합니다. 2) 학습 곡선 : Python 구문은 간결하며 초보자에게 적합합니다. JavaScript Syntax는 유연합니다. 3) 생태계 : Python에는 풍부한 과학 컴퓨팅 라이브러리가 있으며 JavaScript는 강력한 프론트 엔드 프레임 워크를 가지고 있습니다.

JavaScript 프레임 워크 : 현대적인 웹 개발 파워JavaScript 프레임 워크 : 현대적인 웹 개발 파워May 02, 2025 am 12:04 AM

JavaScript 프레임 워크의 힘은 개발 단순화, 사용자 경험 및 응용 프로그램 성능을 향상시키는 데 있습니다. 프레임 워크를 선택할 때 : 1. 프로젝트 규모와 복잡성, 2. 팀 경험, 3. 생태계 및 커뮤니티 지원.

JavaScript, C 및 브라우저의 관계JavaScript, C 및 브라우저의 관계May 01, 2025 am 12:06 AM

서론 나는 당신이 이상하다는 것을 알고 있습니다. JavaScript, C 및 Browser는 정확히 무엇을해야합니까? 그들은 관련이없는 것처럼 보이지만 실제로는 현대 웹 개발에서 매우 중요한 역할을합니다. 오늘 우리는이 세 가지 사이의 밀접한 관계에 대해 논의 할 것입니다. 이 기사를 통해 브라우저에서 JavaScript가 어떻게 실행되는지, 브라우저 엔진의 C 역할 및 웹 페이지의 렌더링 및 상호 작용을 유도하기 위해 함께 작동하는 방법을 알게됩니다. 우리는 모두 JavaScript와 브라우저의 관계를 알고 있습니다. JavaScript는 프론트 엔드 개발의 핵심 언어입니다. 브라우저에서 직접 실행되므로 웹 페이지를 생생하고 흥미롭게 만듭니다. 왜 Javascr

Node.js는 TypeScript가있는 스트림입니다Node.js는 TypeScript가있는 스트림입니다Apr 30, 2025 am 08:22 AM

Node.js는 크림 덕분에 효율적인 I/O에서 탁월합니다. 스트림은 메모리 오버로드를 피하고 큰 파일, 네트워크 작업 및 실시간 애플리케이션을위한 메모리 과부하를 피하기 위해 데이터를 점차적으로 처리합니다. 스트림을 TypeScript의 유형 안전과 결합하면 Powe가 생성됩니다

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

MinGW - Windows용 미니멀리스트 GNU

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

맨티스BT

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

VSCode Windows 64비트 다운로드

VSCode Windows 64비트 다운로드

Microsoft에서 출시한 강력한 무료 IDE 편집기

에디트플러스 중국어 크랙 버전

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

WebStorm Mac 버전

WebStorm Mac 버전

유용한 JavaScript 개발 도구