web-dev-qa-db-ja.com

長い文字列を切り捨てるスマートな方法

JavaScriptを使用して文字列を切り捨て、最後に省略記号を付けるためのより洗練されたソリューション/ライブラリを誰もが持っていますか？

if(string.length > 25) {
    string = string.substring(0,24) + "...";
}
javascriptstringtruncation
147
naltatis
String.prototype.trunc = String.prototype.trunc ||
      function(n){
          return (this.length > n) ? this.substr(0, n-1) + '…' : this;
      };

できるようになりました：

var s = 'not very long';
s.trunc(25); //=> not very long
s.trunc(5); //=> not ...

「より洗練された」とは、文字列の最後のワード境界で切り捨てることを意味する場合、これはあなたが望むものかもしれません：

String.prototype.trunc =
     function( n, useWordBoundary ){
         if (this.length <= n) { return this; }
         var subString = this.substr(0, n-1);
         return (useWordBoundary 
            ? subString.substr(0, subString.lastIndexOf(' ')) 
            : subString) + "&hellip;";
      };

できるようになりました：

s.trunc(11,true) // => not very...

ネイティブオブジェクトを拡張したくない場合は、以下を使用できます。

function truncate( n, useWordBoundary ){
    if (this.length <= n) { return this; }
    var subString = this.substr(0, n-1);
    return (useWordBoundary 
       ? subString.substr(0, subString.lastIndexOf(' ')) 
       : subString) + "&hellip;";
};
// usage
truncate.apply(s, [11, true]); // => not very...
303
KooiInc

これはFirefoxでのみ行う必要があることに注意してください。

すべて その他 ブラウザはCSSソリューションをサポートします（ support table を参照）：

p {
    white-space: nowrap;
    width: 100%;                   /* IE6 needs any width */
    overflow: hidden;              /* "overflow" value must be different from  visible"*/ 
    -o-text-overflow: Ellipsis;    /* Opera < 11*/
    text-overflow:    Ellipsis;    /* IE, Safari (WebKit), Opera >= 11, FF > 6 */
}

皮肉なことに、Mozilla MDCからそのコードスニペットを入手しました。

53
mwilcox

lodashの切り捨て のいずれかを使用します

_.truncate('hi-diddly-ho there, neighborino');
// → 'hi-diddly-ho there, neighbo…'

または nderscore.stringの切り捨て 。

_('Hello world').truncate(5); => 'Hello...'
19
ooolala

人々がCSSの代わりにJavaScriptでこれを行うことを望む正当な理由があります。

JavaScriptで8文字（省略記号を含む）に切り詰めるには：

short = long.replace(/(.{7})..+/, "$1&hellip;");

または

short = long.replace(/(.{7})..+/, "$1…");
17
Adam Leggett

これが私のソリューションです。他の提案よりもいくつかの改善点があります。

String.prototype.truncate = function(){
    var re = this.match(/^.{0,25}[\S]*/);
    var l = re[0].length;
    var re = re[0].replace(/\s$/,'');
    if(l < this.length)
        re = re + "&hellip;";
    return re;
}

// "This is a short string".truncate();
"This is a short string"

// "Thisstringismuchlongerthan25characters".truncate();
"Thisstringismuchlongerthan25characters"

// "This string is much longer than 25 characters and has spaces".truncate();
"This string is much longer&hellip;"

それ：

  • 25文字後の最初のスペースで切り捨てます
  • JavaScript Stringオブジェクトを拡張し、任意の文字列で使用（およびチェーン）できるようにします。
  • 切り捨てによって末尾のスペースが生じる場合、文字列をトリミングします。
  • 切り捨てられた文字列が25文字より長い場合、Unicode hellipエンティティ（省略記号）を追加します
7
c_harm

私が見つけた最高の機能。クレジットtext-Ellipsis.

function textEllipsis(str, maxLength, { side = "end", Ellipsis = "..." } = {}) {
  if (str.length > maxLength) {
    switch (side) {
      case "start":
        return Ellipsis + str.slice(-(maxLength - Ellipsis.length));
      case "end":
      default:
        return str.slice(0, maxLength - Ellipsis.length) + Ellipsis;
    }
  }
  return str;
}

例：

var short = textEllipsis('a very long text', 10);
console.log(short);
// "a very ..."

var short = textEllipsis('a very long text', 10, { side: 'start' });
console.log(short);
// "...ng text"

var short = textEllipsis('a very long text', 10, { textEllipsis: ' END' });
console.log(short);
// "a very END"
5
Jeff Hernandez

すべての最新ブラウザー は、テキストの行が使用可能な幅を超えた場合に自動的に省略記号を追加するための簡単なCSSソリューションをサポートするようになりました。

p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: Ellipsis;
}

（これを行うには、何らかの効果を得るために何らかの方法で要素の幅を制限する必要があることに注意してください。）

https://css-tricks.com/snippets/css/truncate-string-with-Ellipsis/ に基づいています。

このアプローチは、文字数に基づいてnot制限を行うことに注意してください。また、複数行のテキストを許可する必要がある場合、notは機能します。

4
Sean the Bean

最新のJavascriptフレームワーク（ JQuery 、 プロトタイプ 、 etc ...）には、これを処理するStringに追加されたユーティリティ関数があります。

プロトタイプの例を次に示します。

'Some random text'.truncate(10);
// -> 'Some ra...'

これは、他の人に対処/維持してほしい機能の1つと思われます。もっとコードを書くのではなく、フレームワークに処理させます。

4
Jim Fiorato

ファイル名には番号が付けられる場合があり、インデックスは先頭または末尾にある場合があります。そこで、文字列の中心から短くしたかったのです。

function stringTruncateFromCenter(str, maxLength) {
    const midChar = "…";      // character to insert into the center of the result
    var left, right;

    if (str.length <= maxLength) return str;

    // length of beginning part      
    left = Math.ceil(maxLength / 2);

    // start index of ending part   
    right = str.length - Math.floor(maxLength / 2) + 1;   

    return str.substr(0, left) + midChar + str.substring(right);
}

ここでは、UTF-8で1バイトを超える塗り文字を使用していることに注意してください。

2
Hauke

誰かがnullを処理している例を見逃したかもしれませんが、nullがあったときに3つのトップアンサーがうまくいきませんでした既存の関数を、他の人に提供すると思った、エリプシスの優れた切り捨て回答の1つと共に使用していました。

例えば.

javascript：

news.comments

切り捨て関数を使用する

news.comments.trunc(20, true);

ただし、news.commentsでnullの場合、これは「壊れる」

最終

checkNull(news.comments).trunc(20, true)

KooiIncの提供によるtrunc関数

String.prototype.trunc =
 function (n, useWordBoundary) {
     console.log(this);
     var isTooLong = this.length > n,
         s_ = isTooLong ? this.substr(0, n - 1) : this;
     s_ = (useWordBoundary && isTooLong) ? s_.substr(0, s_.lastIndexOf(' ')) : s_;
     return isTooLong ? s_ + '&hellip;' : s_;
 };

私のシンプルなnullチェッカー（リテラルの「null」もチェックします（これは未定義、「」、null、「null」などをキャッチします。）

  function checkNull(val) {
      if (val) {
          if (val === "null") {
              return "";
          } else {
              return val;
          }
      } else {
          return "";
      }
  }
2
Tom Stickel

簡単なグーグルで見つけた this ...それはあなたのために機能しますか？

/**
 * Truncate a string to the given length, breaking at Word boundaries and adding an elipsis
 * @param string str String to be truncated
 * @param integer limit Max length of the string
 * @return string
 */
var truncate = function (str, limit) {
    var bits, i;
    if (STR !== typeof str) {
        return '';
    }
    bits = str.split('');
    if (bits.length > limit) {
        for (i = bits.length - 1; i > -1; --i) {
            if (i > limit) {
                bits.length = i;
            }
            else if (' ' === bits[i]) {
                bits.length = i;
                break;
            }
        }
        bits.Push('...');
    }
    return bits.join('');
};
// END: truncate
1
Manrico Corazzi

Ext.jsを使用している場合は、 Ext.util.Format.Ellipsis 関数を使用できます。

1
andrecardoso

Kooilncのソリューションを支持しました。本当に素敵なコンパクトなソリューション。対処したい小さなエッジケースが1つあります。何らかの理由で誰かが本当に長い文字シーケンスを入力しても、切り捨てられません。

function truncate(str, n, useWordBoundary) {
    var singular, tooLong = str.length > n;
    useWordBoundary = useWordBoundary || true;

    // Edge case where someone enters a ridiculously long string.
    str = tooLong ? str.substr(0, n-1) : str;

    singular = (str.search(/\s/) === -1) ? true : false;
    if(!singular) {
      str = useWordBoundary && tooLong ? str.substr(0, str.lastIndexOf(' ')) : str;
    }

    return  tooLong ? str + '&hellip;' : str;
}
1
backdesk

私の意見では、c_harmの答えは最高です。使用したい場合は注意してください

"My string".truncate(n)

リテラルではなく、正規表現オブジェクトコンストラクタを使用する必要があります。また、変換時に\Sをエスケープする必要があります。

String.prototype.truncate =
    function(n){
        var p  = new RegExp("^.{0," + n + "}[\\S]*", 'g');
        var re = this.match(p);
        var l  = re[0].length;
        var re = re[0].replace(/\s$/,'');

        if (l < this.length) return re + '&hellip;';
    };
0
Matt Fletcher

私は最近これをしなければならず、最終的には：

/**
 * Truncate a string over a given length and add Ellipsis if necessary
 * @param {string} str - string to be truncated
 * @param {integer} limit - max length of the string before truncating
 * @return {string} truncated string
 */
function truncate(str, limit) {
    return (str.length < limit) ? str : str.substring(0, limit).replace(/\w{3}$/gi, '...');
}

私にとって素敵で清潔だと感じます:)

0
John Doherty
.wrap{
  text-overflow: Ellipsis
  white-space: nowrap;
  overflow: hidden;
  width:"your desire width";
}
<p class="wrap">He this is code</p>
0
vijay kanaujia

次のコードを使用

 function trancateTitle (title) {
    var length = 10;
    if (title.length > length) {
       title = title.substring(0, length)+'...';
    }
    return title;
}
0
Chathurka

どこかスマート：D

//My Huge Huge String
    let tooHugeToHandle = `It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).`
    
//Trim Max Length
 const maxValue = 50
// The barber.
 const TrimMyString = (string, maxLength, start = 0) => {
//Note - `start` is if I want to start after some point of the string
        if (string.length > maxLength) {
        let trimmedString = string.substr(start, maxLength)
         return (
           trimmedString.substr(
           start,
           Math.min(trimmedString.length,   trimmedString.lastIndexOf(' '))
           ) + ' ...'
         )
       }
    return string
}

console.log(TrimMyString(tooHugeToHandle, maxValue))
0
Satyam Pathak

.slice（）の使用が好きです。最初の引数は開始インデックスで、2番目の引数は終了インデックスです。間にあるものすべてがあなたが返すものです。

var long = "hello there! Good day to ya."
// hello there! Good day to ya.

var short  = long.slice(0, 5)
// hello
0
Eric Wallen

Kooilncのソリューションを修正する：

String.prototype.trunc = String.prototype.trunc ||
  function(n){
      return this.length>n ? this.substr(0,n-1)+'&hellip;' : this.toString();
  };

これは、切り捨てる必要がない場合、Stringオブジェクトの代わりに文字列値を返します。

0
qwales1
('long text to be truncated').replace(/(.{250})..+/, "$1…");

どういうわけか、上記のコードは、vuejsアプリでコピーまたは貼り付けられたテキストに対して機能しませんでした。そこで、私は lodash truncate を使用し、現在は正常に動作しています。

_.truncate('long text to be truncated', { 'length': 250, 'separator': ' '});
0
Afraz Ahmad