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

  1. 現在の位置
  2. ホームページ
  3. 経験ノート
  4. 本文

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</div>
<div limit="10" >私はpox私はpox私は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</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</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]);+"...";
      }
     }
    }

ここではgetElementsByTagNameを使用してすべてのノードを取得し、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#oldtoolbag.com（メールを送信する際、#を@に置き換えてください。報告を行い、関連する証拠を提供してください。一旦確認がとれましたら、本サイトは即座に侵害を疑われるコンテンツを削除します。）

基本教程
おすすめ