文字列を直接切り捨てるJavaScript


167

ストレートJavaScriptを使用して動的にロードされた文字列を切り捨てたいのですが。これはURLなので、スペースはありません。単語の境界は気にせず、文字のみです。

ここに私が得たものがあります:

var pathname = document.referrer; //wont work if accessing file:// paths
document.getElementById("foo").innerHTML = "<a href='" + pathname +"'>" + pathname +"</a>"

1
どの部分を切り捨てますか?あなたの例は意図をうまく伝えていません。
ラルセナル2009

1
わかりました。URLを特定の文字数で切り捨てたいので、 "foo"のinnerHTMLを設定した場合、長すぎるとdivから流出しません。
ボブ

1
*ただし、var pathname自体ではなく、innerHTMLのみ。
ボブ

1
CSSを使用してdivのオーバーフローを非表示にしないのはなぜですか?オーバーフロー:非表示
サミュエル

2
@Samuel UIに関してはあまり慣れていません。ユーザーが元のURL(document.referrer)を表示することをユーザーが期待していて、それを短くしているので、一部しか表示していないことをユーザーに示したいと思います。 URLの、そしてエラーがなかったこと。それとは別に、あなたが提案する方法は文字を半分にカットし、恐ろしく見えるでしょう。
ボブ

回答:


334

サブストリングメソッドを使用します。

var length = 3;
var myString = "ABCDEFG";
var myTruncatedString = myString.substring(0,length);
// The value of myTruncatedString is "ABC"

だからあなたの場合:

var length = 3;  // set to the number of characters you want to keep
var pathname = document.referrer;
var trimmedPathname = pathname.substring(0, Math.min(length,pathname.length));

document.getElementById("foo").innerHTML =
     "<a href='" + pathname +"'>" + trimmedPathname + "</a>"

1
0から始まる部分文字列が必要な場合、substr関数は3つの少ない文字でまったく同じことを行います;)
jackocnr

1
文字列がlength- より短い場合、substrは奇妙な動作をします
RozzA

「文字列」が数値の場合は、処理できる.toString().文字列に変換するために挿入する必要もありますsubstring()
not2qubit


16

はい、部分文字列。Math.minを実行する必要はありません。文字列の長さよりも長いインデックスを持つ部分文字列は、元の長さで終わります。

だが!

document.getElementById("foo").innerHTML = "<a href='" + pathname +"'>" + pathname +"</a>"

これは間違いです。document.referrerにアポストロフィがある場合はどうなりますか?または、HTMLで特別な意味を持つその他のさまざまな文字。最悪の場合、リファラーの攻撃者コードがJavaScriptをページに挿入する可能性があり、これはXSSセキュリティホールです。

パス名の文字を手動でエスケープしてこれを停止することは可能ですが、少し面倒です。innerHTML文字列をいじるよりも、DOMメソッドを使用する方が得策です。

if (document.referrer) {
    var trimmed= document.referrer.substring(0, 64);
    var link= document.createElement('a');
    link.href= document.referrer;
    link.appendChild(document.createTextNode(trimmed));
    document.getElementById('foo').appendChild(link);
}

私は混乱しています、あなたの解決策はどのようにセキュリティホールを回避しますか?
ボブ

10
'createTextNode'や '.href = ...'のようなDOMメソッドを使用する場合、実際の基本的なプレーンテキスト値を直接設定しています。HTMLファイルまたはinnerHTMLを使用してHTMLを記述する場合は、HTMLエスケープルールに従う必要があります。したがって、「createTextNode( 'A <B&C')」は問題ありませんが、innerHTMLでは「innerHTML = 'A&lt; B&amp; C」と指定する必要があります。
ボビンス

11

思想私は与えるだろうSugar.jsに言及します。それはかなりスマートな切り捨てメソッドを持っています。

ドキュメントから:

文字列を切り捨てます。splitがtrueでない限り、truncateは単語を分割せず、代わりに切り捨てが発生した単語を破棄します。

例:

'just sittin on the dock of the bay'.truncate(20)

出力:

just sitting on...

9
Sugar is a Javascript library that extends native objects…JavaScriptでネイティブオブジェクトを拡張することは、一般にBad Idea™と見なされています。
Jezen Thomas

@JezenThomas時々悪い考えが最も適切な考えです。
viditkothari

10

次のコードは文字列を切り捨て、単語を分割せず、切り捨てが発生した単語を破棄します。完全にSugar.jsソースに基づいています。

function truncateOnWord(str, limit) {
        var trimmable = '\u0009\u000A\u000B\u000C\u000D\u0020\u00A0\u1680\u180E\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200A\u202F\u205F\u2028\u2029\u3000\uFEFF';
        var reg = new RegExp('(?=[' + trimmable + '])');
        var words = str.split(reg);
        var count = 0;
        return words.filter(function(word) {
            count += word.length;
            return count <= limit;
        }).join('');
    }

2
結果!== strの場合、「...」を追加すると便利です。
レオカゼイロ2016

9

使用できる方法は次のとおりです。これは、FreeCodeCampチャレンジの1つに対する答えです。

function truncateString(str, num) {


if (str.length > num) {
return str.slice(0, num) + "...";}
 else {
 return str;}}

6

ES6バージョンの更新

const truncateString = (string, maxLength = 50) => {
  if (!string) return null;
  if (string.length <= maxLength) return string;
  return `${string.substring(0, maxLength)}...`;
};

truncateString('what up', 4); // returns 'what...'

これは、必要でない場合でも常に部分文字列を呼び出します...
クリントイーストウッド

@ClintEastwood良いフィードバック、私は答えを更新しました。文字列長と最大長をチェックすることは、showDots constとternaryを削除して整然とすることも意味しました。乾杯。
サム・ローガン

3

はい、substringうまくいきます:

stringTruncate('Hello world', 5); //output "Hello..."
stringTruncate('Hello world', 20);//output "Hello world"

var stringTruncate = function(str, length){
  var dots = str.length > length ? '...' : '';
  return str.substring(0, length)+dots;
};

0

単語単位で切り捨てたい場合。

function limit(str, limit, end) {

      limit = (limit)? limit : 100;
      end = (end)? end : '...';
      str = str.split(' ');
      
      if (str.length > limit) {
        var cutTolimit = str.slice(0, limit);
        return cutTolimit.join(' ') + ' ' + end;
      }

      return str.join(' ');
    }

    var limit = limit('ILorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus metus magna, maximus a dictum et, hendrerit ac ligula. Vestibulum massa sapien, venenatis et massa vel, commodo elementum turpis. Nullam cursus, enim in semper luctus, odio turpis dictum lectus', 20);

    console.log(limit);


0

var pa = document.getElementsByTagName('p')[0].innerHTML;
var rpa = document.getElementsByTagName('p')[0];
// console.log(pa.slice(0, 30));
var newPa = pa.slice(0, 29).concat('...');
rpa.textContent = newPa;
console.log(newPa)
<p>
some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here
</p>

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.