English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

텍스트 잘라내는 기능 구현하는 js

이전에는 jq를 사용하여 텍스트 자르기 기능을 만들었지만, jq를 사용하지 않는 프로젝트에서 이 기능을 구현하려면 jq를 포함하는 것이 너무 번거롭습니다. 여기서는 js의 텍스트 자르기 기능을 작성했습니다. 바로 코드를 올립니다. 

HTML(테스트용): 

<div>저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox</div>
<div limit="10" >저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox</div>
<div limit="5" >저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox</div>
<div limit="2" >저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox</div>
<div >저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox</div>
<div limit="20" >저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox</div>
<div limit="100" >저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox</div>
<div>저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox저는 pox</div> 

JS: 

var limit=[];
    var Text=[];
    var Pox=document.getElementsByTagName('*);
    for(var i=0;i<Pox.length;i++{
     if(Pox[i].getAttribute("limit")){
      limit[i]=Pox[i].getAttribute("limit");
      Text[i]=Pox[i].innerHTML;
      if(limit[i]<Text[i].length){
       Pox[i].innerHTML=Text[i].substring(0,limit[i]);+"...";
      }
     }
    } 

이곳에서 모든 노드를 가져와 모든 노드를 순회하며, if(Pox[i].getAttribute("limit"))를 통해 'limit' 이라는 사용자 정의 속성을 가진 노드를 필터링하고, 각 노드의 사용자 정의 속성 'limit'의 값을 가져와 limit 배열에 넣고, 각 노드의 텍스트를 Text 배열에 넣습니다. 필요한 부분과 텍스트 길이를 비교하여 잘라냅니다. 

모든 JS, 여기서 자체 호출:

<script type="text/javascript">
 window.onload=function(){
  (function limit(){
   var limit=[];
    var Text=[];
    var Pox=document.getElementsByTagName('*);
    for(var i=0;i<Pox.length;i++{
     if(Pox[i].getAttribute("limit")){
      limit[i]=Pox[i].getAttribute("limit");
      Text[i]=Pox[i].innerHTML;
      if(limit[i]<Text[i].length){
      Pox[i].innerHTML=Text[i].substring(0,limit[i]);+"...";
      }
     }
    } 
   }());
   }
</script> 

이미지 표시:

이것이 이 문서의 전체 내용입니다. 여러분의 학습에 도움이 되길 바라며, 더 많은 지원과 지지를 부탁드립니다. 노래 튜토리얼을 많이 지지해 주세요.

선언: 이 문서의 내용은 인터넷에서 가져왔으며, 저작권은 원저자에게 있으며, 인터넷 사용자가 자발적으로 기여하고 자체로 업로드한 내용입니다. 이 사이트는 소유권을 가지지 않으며, 인공 편집을 하지 않았으며, 관련 법적 책임도 부담하지 않습니다. 저작권 침해가 의심되는 내용이 있으시면, notice#w로 이메일을 보내 주시기 바랍니다.3codebox.com(이메일을 보내는 경우 #을 @으로 변경하십시오. 신고하시고 관련 증거를 제공하시면, 사실이 확인되면 이 사이트는 즉시 저작권 침해 내용을 삭제합니다。)

추천해드립니다