Cách thông minh để cắt chuỗi dài

Có ai có một giải pháp / thư viện phức tạp hơn để cắt xén chuỗi bằng JavaScript và đặt dấu chấm lửng ở cuối, hơn là giải pháp rõ ràng:

if (string.length > 25) {
  string = string.substring(0, 24) + "...";
}

Về cơ bản, bạn kiểm tra độ dài của chuỗi đã cho. Nếu nó dài hơn một độ dài nhất định n, hãy cắt nó thành chiều dài n( substrhoặc slice) và thêm thực thể html …(Hoài) vào chuỗi đã cắt.

Một phương pháp như vậy

function truncate(str, n){
  return (str.length > n) ? str.substr(0, n-1) + '…' : str;
};

Nếu 'tinh vi hơn', bạn có nghĩa là cắt ngắn ở ranh giới từ cuối cùng của chuỗi thì bạn cần kiểm tra thêm. Trước tiên, bạn cắt chuỗi theo độ dài mong muốn, tiếp theo bạn đưa kết quả của chuỗi đó đến ranh giới từ cuối cùng của nó

function truncate( str, n, useWordBoundary ){
  if (str.length <= n) { return str; }
  const subString = str.substr(0, n-1); // the original check
  return (useWordBoundary 
    ? subString.substr(0, subString.lastIndexOf(" ")) 
    : subString) + "&hellip;";
};

Bạn có thể mở rộng Stringnguyên mẫu tự nhiên với chức năng của bạn. Trong trường hợp đó, strtham số cần được loại bỏ và strtrong hàm nên được thay thế bằng this:

String.prototype.truncate = String.prototype.truncate || 
function ( n, useWordBoundary ){
  if (this.length <= n) { return this; }
  const subString = this.substr(0, n-1); // the original check
  return (useWordBoundary 
    ? subString.substr(0, subString.lastIndexOf(" ")) 
    : subString) + "&hellip;";
};

Nhiều nhà phát triển giáo điều có thể khiến bạn mạnh mẽ về điều đó (" Đừng sửa đổi các đối tượng bạn không sở hữu ". Mặc dù vậy tôi cũng không bận tâm lắm).

Một cách tiếp cận mà không mở rộng Stringnguyên mẫu là tạo đối tượng trợ giúp của riêng bạn, chứa chuỗi (dài) mà bạn cung cấp và phương thức đã nói ở trên để cắt bớt nó. Đó là những gì đoạn trích dưới đây làm.

const LongstringHelper = str => {
  const sliceBoundary = str => str.substr(0, str.lastIndexOf(" "));
  const truncate = (n, useWordBoundary) => 
        str.length <= n ? str : `${ useWordBoundary 
          ? sliceBoundary(str.slice(0, n - 1))
          : str.substr(0, n - 1)}&hellip;`;
  return { full: str,  truncate };
}; 
const longStr = LongstringHelper(`Lorem ipsum dolor sit amet, consectetur 
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore 
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
irure dolor in reprehenderit in voluptate velit esse cillum dolore 
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum`);

const plain = document.querySelector("#resultTruncatedPlain");
const lastWord = document.querySelector("#resultTruncatedBoundary");
plain.innerHTML = 
  longStr.truncate(+plain.dataset.truncateat, !!+plain.dataset.onword);
lastWord.innerHTML = 
  longStr.truncate(+lastWord.dataset.truncateat, !!+lastWord.dataset.onword);
document.querySelector("#resultFull").innerHTML = longStr.full;

body {
  font: normal 12px/15px verdana, arial;
}

p {
  width: 450px;
}

#resultTruncatedPlain:before {
  content: 'Truncated (plain) n='attr(data-truncateat)': ';
  color: green;
}

#resultTruncatedBoundary:before {
  content: 'Truncated (last whole word) n='attr(data-truncateat)': ';
  color: green;
}

#resultFull:before {
  content: 'Full: ';
  color: green;
}

<p id="resultTruncatedPlain" data-truncateat="120" data-onword="0"></p>
<p id="resultTruncatedBoundary" data-truncateat="120" data-onword="1"></p>
<p id="resultFull"></p>

Cuối cùng, bạn chỉ có thể sử dụng css để cắt các chuỗi dài trong các nút HTML. Nó cung cấp cho bạn ít kiểm soát hơn, nhưng cũng có thể là giải pháp khả thi.

body {
  font: normal 12px/15px verdana, arial;
  margin: 2rem;
}

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 30vw;
}

.truncate:before{
  content: attr(data-longstring);
}

.truncate:hover::before {
  content: attr(data-longstring);
  width: auto;
  height: auto;
  overflow: initial;
  text-overflow: initial;
  white-space: initial;
  background-color: white;
  display: inline-block;
}

<div class="truncate" data-longstring="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."></div>

Lưu ý rằng điều này chỉ cần được thực hiện cho Firefox.

Tất cả các trình duyệt khác đều hỗ trợ giải pháp CSS (xem bảng hỗ trợ ):

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 */
}

Điều trớ trêu là tôi đã nhận được đoạn mã đó từ Mozilla MDC.

Có những lý do hợp lệ mà mọi người có thể muốn làm điều này trong JavaScript thay vì CSS.

Để cắt ngắn thành 8 ký tự (bao gồm cả dấu chấm lửng) trong JavaScript:

short = long.replace(/(.{7})..+/, "$1…");

hoặc là

short = long.replace(/(.{7})..+/, "$1…");

Sử dụng cắt ngắn của lodash

_.truncate('hi-diddly-ho there, neighborino');
// → 'hi-diddly-ho there, neighbo…'

hoặc cắt xén gạch dưới .

_('Hello world').truncate(5); => 'Hello...'

('long text to be truncated').replace(/(.{250})..+/, "$1…");

Bằng cách nào đó, mã trên không hoạt động đối với một số loại văn bản được dán hoặc văn bản trong ứng dụng vuejs. Vì vậy, tôi đã sử dụng lodash truncate và bây giờ nó hoạt động tốt.

_.truncate('long text to be truncated', { 'length': 250, 'separator': ' '});

Đây là giải pháp của tôi, có một vài cải tiến so với các đề xuất khác:

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 + "&hellip;";
    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&hellip;"

Nó:

• Cắt ngắn trên không gian đầu tiên sau 25 ký tự
• Mở rộng đối tượng Chuỗi JavaScript, để nó có thể được sử dụng trên (và xâu chuỗi) bất kỳ chuỗi nào.
• Sẽ cắt chuỗi nếu cắt ngắn dẫn đến một không gian dấu;
• Sẽ thêm thực thể hellip unicode (dấu chấm lửng) nếu chuỗi bị cắt ngắn hơn 25 ký tự

Chức năng tốt nhất tôi đã tìm thấy. Tín dụng cho dấu chấm lửng văn bản .

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

Ví dụ :

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"

Tất cả các trình duyệt hiện đại hiện hỗ trợ một giải pháp CSS đơn giản để tự động thêm dấu chấm lửng nếu một dòng văn bản vượt quá chiều rộng có sẵn:

p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

(Lưu ý rằng điều này đòi hỏi chiều rộng của phần tử phải được giới hạn theo một cách nào đó để có bất kỳ ảnh hưởng nào.)

Dựa trên https://css-tricks.com/snippets/css/truncate-opes-with-ellipsis/ .

Cần lưu ý rằng phương pháp này không giới hạn dựa trên số lượng ký tự. Nó cũng không hoạt động nếu bạn cần cho phép nhiều dòng văn bản.

Hầu hết các khung Javascript hiện đại ( JQuery , Prototype , v.v. ) đều có chức năng tiện ích được xử lý theo Chuỗi xử lý việc này.

Đây là một ví dụ trong Prototype:

'Some random text'.truncate(10);
// -> 'Some ra...'

Đây có vẻ như là một trong những chức năng mà bạn muốn người khác xử lý / duy trì. Tôi sẽ để khung xử lý nó, thay vì viết nhiều mã hơn.

Có lẽ tôi đã bỏ lỡ một ví dụ về việc ai đó xử lý null, nhưng 3 câu trả lời HÀNG ĐẦU không hiệu quả với tôi khi tôi có null (Chắc chắn tôi nhận ra rằng xử lý lỗi là và hàng triệu thứ khác KHÔNG phải là trách nhiệm của người trả lời câu hỏi, nhưng vì Tôi đã sử dụng một chức năng hiện có cùng với một trong những câu trả lời dấu chấm lửng tuyệt vời mà tôi nghĩ rằng tôi sẽ cung cấp nó cho người khác.

ví dụ

javascript:

news.comments

sử dụng chức năng cắt ngắn

news.comments.trunc(20, true);

Tuy nhiên, trên news.comments là null, điều này sẽ "phá vỡ"

Sau cùng

checkNull(news.comments).trunc(20, true) 

chức năng cắt ngắn lịch sự của KooiInc

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

Trình kiểm tra null đơn giản của tôi (cũng kiểm tra cả chữ "null" theo nghĩa đen (cái này bắt không xác định, "", null, "null", v.v.)

  function checkNull(val) {
      if (val) {
          if (val === "null") {
              return "";
          } else {
              return val;
          }
      } else {
          return "";
      }
  }

Đôi khi tên tệp được đánh số, trong đó chỉ mục có thể ở đầu hoặc cuối. Vì vậy, tôi muốn rút ngắn từ trung tâm của chuỗi:

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

Xin lưu ý rằng tôi đã sử dụng ký tự điền ở đây với hơn 1 byte trong UTF-8.

Bạn có thể sử dụng hàm Ext.util.Format.ellipsis nếu bạn đang sử dụng Ext.js.

Tôi ủng hộ giải pháp của Kooilnc. Giải pháp nhỏ gọn thực sự tốt đẹp. Có một trường hợp cạnh nhỏ mà tôi muốn giải quyết. Nếu ai đó nhập một chuỗi ký tự thực sự dài vì bất kỳ lý do gì, nó sẽ không bị cắt ngắn:

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

Với một Google Googling nhanh chóng tôi đã tìm thấy điều này ... Điều đó có hiệu quả với bạn không?

/**
 * 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

Tràn văn bản: dấu chấm lửng là thuộc tính bạn cần. Với điều này và một tràn: được ẩn với một chiều rộng cụ thể, mọi thứ vượt qua sẽ có hiệu ứng ba giai đoạn ở cuối ... Đừng quên thêm khoảng trắng: nowrap hoặc văn bản sẽ được đặt thành nhiều dòng.

.wrap{
  text-overflow: ellipsis
  white-space: nowrap;
  overflow: hidden;
  width:"your desired width";
}
<p class="wrap">The string to be cut</p>

Theo tôi, câu trả lời của c_harm là tốt nhất. Xin lưu ý rằng nếu bạn muốn sử dụng

"My string".truncate(n)

bạn sẽ phải sử dụng một hàm tạo đối tượng regrec chứ không phải bằng chữ. Ngoài ra, bạn sẽ phải thoát khỏi \Skhi chuyển đổi nó.

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 + '&hellip;';
    };

Sử dụng mã sau

 function trancateTitle (title) {
    var length = 10;
    if (title.length > length) {
       title = title.substring(0, length)+'...';
    }
    return title;
}

Sửa lỗi giải pháp của Kooilnc:

String.prototype.trunc = String.prototype.trunc ||
  function(n){
      return this.length>n ? this.substr(0,n-1)+'…' : this.toString();
  };

Điều này trả về giá trị chuỗi thay vì đối tượng String nếu không cần phải cắt bớt.

Gần đây tôi đã phải làm điều này và kết thúc với:

/**
 * 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, '...');
}

Cảm thấy tốt và sạch sẽ với tôi :)

Tôi thích sử dụng .slice () Đối số đầu tiên là chỉ mục bắt đầu và thứ hai là chỉ mục kết thúc. Tất cả mọi thứ ở giữa là những gì bạn nhận lại.

var long = "hello there! Good day to ya."
// hello there! Good day to ya.

var short  = long.slice(0, 5)
// hello

Một nơi nào đó thông minh: 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))

Hàm này cũng có thể cắt các phần không gian và từ. (Ví dụ: Mẹ thành Moth ...)

String.prototype.truc= function (length) {
        return this.length>length ? this.substring(0, length) + '…' : this;
};

sử dụng:

"this is long length text".trunc(10);
"1234567890".trunc(5);

đầu ra:

đây là ...

12345 ...