Memotong JavaScript string lurus

167

Saya ingin memotong string yang dimuat secara dinamis menggunakan JavaScript lurus. Ini url, jadi tidak ada spasi, dan saya jelas tidak peduli tentang batas kata, hanya karakter.

Inilah yang saya dapatkan:

var pathname = document.referrer; //wont work if accessing file:// paths
document.getElementById("foo").innerHTML = "<a href='" + pathname +"'>" + pathname +"</a>"
Bob
sumber
1
Bagian mana yang ingin Anda potong? Contoh Anda tidak menyampaikan maksud dengan baik.
Larsenal
1
oh ok- Saya ingin memotong URL pada jumlah karakter tertentu, sehingga ketika saya mengatur innerHTML "foo" itu tidak akan mengalir keluar dari div jika terlalu panjang.
Bob
1
* Tapi- hanya innerHTML, bukan var pathname itu sendiri.
Bob
1
Mengapa tidak menggunakan css saja untuk menyembunyikan overflow div? overflow: hidden
Samuel
2
@Amuel Karena itu akan menjadi praktik yang buruk UI-bijaksana- jika pengguna mengharapkan untuk melihat url mereka baru saja berasal (document.referrer), dan saya memperpendeknya, saya ingin menunjukkan kepada mereka bahwa mereka hanya melihat sebagian url, dan tidak ada kesalahan. Selain itu, metode yang Anda usulkan akan memotong karakter menjadi dua yang akan tampak mengerikan.
Bob

Jawaban:

334

Gunakan metode substring :

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

Jadi dalam kasus Anda:

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>"
Larsenal
sumber
1
Jika Anda menginginkan substring mulai dari 0, maka fungsi substr akan melakukan hal yang sama persis dengan 3 karakter kurang;)
jackocnr
1
Substr berperilaku aneh jika string lebih pendek dari length- mengembalikan kosong
RozzA
Jika "string" Anda adalah angka, Anda juga harus memasukkan .toString().untuk mengubahnya menjadi string yang substring()dapat menangani.
not2qubit
16

ya, substring. Anda tidak perlu melakukan Math.min; substring dengan indeks yang lebih panjang dari panjang string berakhir pada panjang aslinya.

Tapi!

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

Ini sebuah kesalahan. Bagaimana jika document.referrer memiliki tanda kutip? Atau berbagai karakter lain yang memiliki makna khusus dalam HTML. Dalam kasus terburuk, kode penyerang di pengarah dapat menyuntikkan JavaScript ke halaman Anda, yang merupakan lubang keamanan XSS.

Sementara itu mungkin untuk melarikan diri karakter dalam pathname secara manual untuk menghentikan hal ini terjadi, itu agak menyebalkan. Anda lebih baik menggunakan metode DOM daripada mengutak-atik string innerHTML.

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);
}
bobince
sumber
Saya bingung, bagaimana solusi Anda menghindari lubang keamanan?
Bob
10
Ketika Anda menggunakan metode DOM seperti 'createTextNode' dan '.href = ...', Anda secara langsung menetapkan nilai plaintext yang mendasarinya. Saat Anda menulis HTML, baik dalam file HTML atau melalui innerHTML, Anda harus mematuhi aturan pelolosan HTML. Jadi sementara 'createTextNode (' A <B&C ')' baik-baik saja, dengan innerHTML Anda harus mengatakan 'innerHTML =' A & lt; B & amp; C ''.
bobince
11

Kupikir aku akan memberi Sugar . Ini memiliki metode terpotong yang cukup pintar.

Dari dokumentasi :

Memotong string. Kecuali pemisahan benar, pemotongan tidak akan membagi kata, dan sebaliknya membuang kata di mana pemotongan terjadi.

Contoh:

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

Keluaran:

just sitting on...
Brian
sumber
9
Sugar is a Javascript library that extends native objects... Memperluas objek asli dalam JavaScript umumnya dianggap sebagai Ide Buruk ™.
Jezen Thomas
@JezenThomas Terkadang ide buruk adalah ide yang paling tepat.
viditkothari
10

Kode berikut memotong string dan tidak akan membagi kata, dan sebaliknya membuang kata di mana pemotongan terjadi. Benar-benar berdasarkan sumber 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('');
    }
Beto Frega
sumber
2
Itu akan menyenangkan menambahkan "..." jika hasilnya! == str;
Leo Caseiro
9

Inilah satu metode yang dapat Anda gunakan. Ini adalah jawaban untuk salah satu Tantangan FreeCodeCamp:

function truncateString(str, num) {


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

Versi ES6 yang diperbarui

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...'
Sam Logan
sumber
ini selalu memanggil substring, bahkan ketika itu mungkin tidak perlu ...
Clint Eastwood
@ClintEastwood umpan balik yang baik, saya telah memperbarui jawabannya. Memeriksa panjang string vs panjang max juga berarti saya bisa menghapus showDots const dan ternary menjadikannya lebih rapi. Bersulang.
Sam Logan
3

Ya, substringsangat bagus:

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;
};
Arnaud Anato
sumber
0

jika Anda ingin memotong dengan kata.

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);

Fhulufhelo Mokhomi
sumber
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>

sadeq alshaar
sumber