web-dev-qa-db-ja.com

文字列ストレートJavaScriptを切り捨てる

直接JavaScriptを使用して、動的にロードされた文字列を切り捨てたいです。これはURLなので、スペースはありません。明らかに、Wordの境界は気にしません。文字だけです。

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

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

substring メソッドを使用します。

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>"
299
Larsenal

はい、サブストリング。 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);
}
15
bobince

Sugar.js に言及すると思います。それはかなり賢い切り捨てメソッドを持っています。

ドキュメント から：

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

例：

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

出力：

just sitting on...
11
Brian

次のコードは文字列を切り捨て、単語を分割せず、代わりに切り捨てが発生した単語を破棄します。完全に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('');
    }
9
Beto Frega

使用できる1つの方法を次に示します。これは、FreeCodeCampチャレンジの1つの答えです。

function truncateString(str, num) {


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

はい、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;
};
2
Arnaud Anato

wordで切り捨てたい場合。

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
Fhulufhelo Mokhomi
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>
0
sadeq alshaar

ES6バージョンの更新

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

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