Cắt một chuỗi JavaScript thẳng

Tôi muốn cắt bớt một chuỗi được tải động bằng cách sử dụng JavaScript thẳng. Đó là một url, vì vậy không có khoảng trắng và rõ ràng tôi không quan tâm đến ranh giới từ, chỉ các ký tự.

Đây là những gì tôi nhận được:

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

Sử dụng phương pháp chuỗi con :

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

Vì vậy, trong trường hợp của bạn:

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

vâng, chuỗi con. Bạn không cần phải làm Math.min; chuỗi con có chỉ số dài hơn độ dài của chuỗi kết thúc ở độ dài ban đầu.

Nhưng!

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

Đây là một sai lầm. Điều gì xảy ra nếu document.referrer có dấu nháy đơn? Hoặc nhiều nhân vật khác có ý nghĩa đặc biệt trong HTML. Trong trường hợp xấu nhất, mã kẻ tấn công trong trình giới thiệu có thể đưa JavaScript vào trang của bạn, đây là lỗ hổng bảo mật XSS.

Mặc dù có thể thoát các ký tự trong tên đường dẫn theo cách thủ công để ngăn chặn điều này xảy ra, nhưng điều đó hơi khó khăn. Bạn nên sử dụng các phương thức DOM hơn là đấu tranh với các chuỗi bên trong.

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

Nghĩ rằng tôi sẽ cho Sugar.js đề cập đến . Nó có một phương pháp cắt ngắn khá thông minh.

Từ tài liệu :

Cắt một chuỗi. Trừ khi phân chia là đúng, cắt ngắn sẽ không phân chia các từ và thay vào đó loại bỏ từ nơi cắt ngắn xảy ra.

Thí dụ:

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

Đầu ra:

just sitting on...

Mã theo sau cắt ngắn một chuỗi và sẽ không phân tách các từ, và thay vào đó loại bỏ từ nơi xảy ra cắt ngắn. Hoàn toàn dựa trên nguồn 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('');
    }

Đây là một phương pháp bạn có thể sử dụng. Đây là câu trả lời cho một trong những Thách thức FreeCodeCamp:

function truncateString(str, num) {


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

Phiên bản ES6 đã cập nhật

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...'

Vâng, substringhoạt động tuyệt vời:

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

trong trường hợp bạn muốn cắt ngắn bằng từ.

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