JavaScriptを使用して文字列を切り捨て、最後に省略記号を付けるためのより洗練されたソリューション/ライブラリを誰もが持っていますか?
if(string.length > 25) {
string = string.substring(0,24) + "...";
}
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) + "…";
};
できるようになりました:
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) + "…";
};
// usage
truncate.apply(s, [11, true]); // => not very...
これは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からそのコードスニペットを入手しました。
lodashの切り捨て のいずれかを使用します
_.truncate('hi-diddly-ho there, neighborino');
// → 'hi-diddly-ho there, neighbo…'
または nderscore.stringの切り捨て 。
_('Hello world').truncate(5); => 'Hello...'
人々がCSSの代わりにJavaScriptでこれを行うことを望む正当な理由があります。
JavaScriptで8文字(省略記号を含む)に切り詰めるには:
short = long.replace(/(.{7})..+/, "$1…");
または
short = long.replace(/(.{7})..+/, "$1…");
これが私のソリューションです。他の提案よりもいくつかの改善点があります。
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 + "…";
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…"
それ:
私が見つけた最高の機能。クレジット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"
すべての最新ブラウザー は、テキストの行が使用可能な幅を超えた場合に自動的に省略記号を追加するための簡単なCSSソリューションをサポートするようになりました。
p {
white-space: nowrap;
overflow: hidden;
text-overflow: Ellipsis;
}
(これを行うには、何らかの効果を得るために何らかの方法で要素の幅を制限する必要があることに注意してください。)
https://css-tricks.com/snippets/css/truncate-string-with-Ellipsis/ に基づいています。
このアプローチは、文字数に基づいてnot制限を行うことに注意してください。また、複数行のテキストを許可する必要がある場合、notは機能します。
ファイル名には番号が付けられる場合があり、インデックスは先頭または末尾にある場合があります。そこで、文字列の中心から短くしたかったのです。
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バイトを超える塗り文字を使用していることに注意してください。
誰かが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_ + '…' : s_;
};
私のシンプルなnullチェッカー(リテラルの「null」もチェックします(これは未定義、「」、null、「null」などをキャッチします。)
function checkNull(val) {
if (val) {
if (val === "null") {
return "";
} else {
return val;
}
} else {
return "";
}
}
簡単なグーグルで見つけた 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
Ext.jsを使用している場合は、 Ext.util.Format.Ellipsis 関数を使用できます。
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 + '…' : str;
}
私の意見では、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 + '…';
};
私は最近これをしなければならず、最終的には:
/**
* 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, '...');
}
私にとって素敵で清潔だと感じます:)
.wrap{
text-overflow: Ellipsis
white-space: nowrap;
overflow: hidden;
width:"your desire width";
}
<p class="wrap">He this is code</p>
次のコードを使用
function trancateTitle (title) {
var length = 10;
if (title.length > length) {
title = title.substring(0, length)+'...';
}
return title;
}
どこかスマート: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))
.slice()の使用が好きです。最初の引数は開始インデックスで、2番目の引数は終了インデックスです。間にあるものすべてがあなたが返すものです。
var long = "hello there! Good day to ya."
// hello there! Good day to ya.
var short = long.slice(0, 5)
// hello
Kooilncのソリューションを修正する:
String.prototype.trunc = String.prototype.trunc ||
function(n){
return this.length>n ? this.substr(0,n-1)+'…' : this.toString();
};
これは、切り捨てる必要がない場合、Stringオブジェクトの代わりに文字列値を返します。
('long text to be truncated').replace(/(.{250})..+/, "$1…");
どういうわけか、上記のコードは、vuejsアプリでコピーまたは貼り付けられたテキストに対して機能しませんでした。そこで、私は lodash truncate を使用し、現在は正常に動作しています。
_.truncate('long text to be truncated', { 'length': 250, 'separator': ' '});