Chỉ hiển thị 10 ký tự của một chuỗi dài?

Question

Làm cách nào để nhận chuỗi văn bản dài (như chuỗi truy vấn) hiển thị tối đa 10 ký tự, bằng cách sử dụng JQuery?

Xin lỗi, tôi là người mới làm quen với JavaScript & JQuery: S
Mọi trợ giúp sẽ được đánh giá cao.

Answer 1

Nếu tôi hiểu chính xác bạn muốn giới hạn chuỗi thành 10 ký tự?

var str = 'Some very long string'; 
if(str.length > 10) str = str.substring(0,10); 

Điều gì đó tương tự?

Answer 2

html

<p id='longText'>Some very very very very very very very very very very very long string</p> 

javascript (trên doc sẵn sàng)

var longText = $('#longText'); 
longText.text(longText.text().substr(0, 10)); 

Nếu bạn có nhiều từ trong văn bản, và muốn mỗi được giới hạn tối đa 10 ký tự, bạn có thể làm:

var longText = $('#longText'); 
var text = longText.text(); 
var regex = /\w{11}\w*/, match; 
while(match = regex.exec(text)) { 
    text = text.replace(match[0], match[0].substr(0, 10)); 
} 
longText.text(text); 

Answer 3

Và đây là một ví dụ jQuery:

HTML trường văn bản:

<input type="text" id="myTextfield" /> 

jQuery mã để hạn chế kích thước của nó:

var elem = $("#myTextfield"); 
if(elem) elem.val(elem.val().substr(0,10)); 

Ví dụ, bạn có thể sử dụng mã jQuery trên để hạn chế người dùng nhập hơn 10 ký tự trong khi anh ấy đang nhập; đoạn mã sau đây không chính xác này:

$(document).ready(function() { 
    var elem = $("#myTextfield"); 
    if (elem) { 
     elem.keydown(function() { 
      if (elem.val().length > 10) 
       elem.val(elem.val().substr(0, 10)); 
     }); 
    }    
}); 

---

Cập nhật: Đoạn mã trên chỉ được sử dụng để hiển thị một cách sử dụng ví dụ.

Đoạn mã sau sẽ xử lý bạn phát hành với các phần tử DIV:

$(document).ready(function() { 
    var elem = $(".tasks-overflow"); 
    if(elem){ 
     if (elem.text().length > 10) 
       elem.text(elem.text().substr(0,10)) 
    } 
}); 

Xin lưu ý mà tôi đang sử dụng text thay vì val trong trường hợp này, vì phương pháp val dường như không làm việc với phần tử DIV.

Answer 4

Bạn cũng nên làm gì khi bạn cắt bớt chuỗi thành mười ký tự là thêm thực thể dấu chấm lửng html thực tế: …, thay vì ba dấu chấm.

Answer 5

Điều này trông giống như những gì bạn có thể muốn.

$(document).ready(function(){ 
var stringWithShorterURLs = getReplacementString($(".tasks-overflow").text()); 

function getReplacementString(str){ 
    return str.replace(/(https?\:\/\/[^\s]*)/gi,function(match){ 
     return match.substring(0,10) + "..." 
    }); 
}}); 

bạn cho nó yếu tố html của bạn trong dòng đầu tiên và sau đó phải mất toàn bộ văn bản, thay thế các url với các phiên bản dài 10 nhân vật và trả về cho bạn. Điều này có vẻ hơi lạ khi chỉ có 3 trong số các ký tự url vì vậy tôi sẽ giới thiệu điều này nếu có thể.

$(document).ready(function(){ 
var stringWithShorterURLs = getReplacementString($(".tasks-overflow p").text()); 

function getReplacementString(str){ 
    return str.replace(/https?\:\/\/([^\s]*)/gi,function(match){ 
     return match.substring(0,10) + "..." 
    }); 
}}); 

mà sẽ rip ra http: // hoặc https: // và in lên đến 10 charaters của www.example.com

Answer 6

Hiện "văn bản dài văn bản dài văn bản dài văn bản dài này văn bản dài dài văn bản dài văn bản dài văn bản dài văn bản dài văn bản dài văn bản dài văn bản dài văn bản dài văn bản dài văn bản dài văn bản dài văn bản dài văn bản dài văn bản dài văn bản dài văn bản dài văn bản dài văn bản dài văn bản dài văn bản dài văn bản dài văn bản dài văn bản dài văn bản dài văn bản dài văn bản dài văn bản "

để

văn bản dài dài văn bản dài ...

 function cutString(text){  
      var wordsToCut = 5; 
      var wordsArray = text.split(" "); 
      if(wordsArray.length>wordsToCut){ 
       var strShort = ""; 
       for(i = 0; i < wordsToCut; i++){ 
        strShort += wordsArray[i] + " "; 
       } 
       return strShort+"..."; 
      }else{ 
       return text; 
      } 
     }; 

Answer 7

@ jolly.exe

đẹp dụ Jolly. Tôi đã cập nhật phiên bản của bạn giới hạn độ dài ký tự thay vì số từ. Tôi cũng đã thêm đặt tiêu đề cho innerHTML ban đầu thực, vì vậy người dùng có thể di chuột và xem nội dung bị cắt bớt.

HTML

<div id="stuff">a reallly really really long titleasdfasdfasdfasdfasdfasdfasdfadsf</div> 

JS

function cutString(id){  
    var text = document.getElementById(id).innerHTML;   
    var charsToCutTo = 30; 
     if(text.length>charsToCutTo){ 
      var strShort = ""; 
      for(i = 0; i < charsToCutTo; i++){ 
       strShort += text[i]; 
      } 
      document.getElementById(id).title = "text"; 
      document.getElementById(id).innerHTML = strShort + "..."; 
     }    
    }; 

cutString('stuff'); 

Answer 8

('very long string'.slice(0,10))+'...' 
// "very long ..." 

Answer 9

Tạo câu trả lời của riêng, như ai đã coi rằng sự chia rẽ có thể không xảy ra (văn bản ngắn hơn). Trong trường hợp đó, chúng tôi không muốn thêm '...' làm hậu tố.

hành ternary sẽ sắp xếp mà ra:

var text = "blahalhahkanhklanlkanhlanlanhak"; 
var count = 35; 

var result = text.slice(0, count) + (text.length > count ? "..." : ""); 

Có thể được đóng cửa để chức năng:

function fn(text, count){ 
    return text.slice(0, count) + (text.length > count ? "..." : ""); 
} 

console.log(fn("aognaglkanglnagln", 10)); 

Và mở rộng đến lớp những người giúp đỡ nên Bạn thậm chí có thể chọn nếu bạn muốn chấm hay không:

function fn(text, count, insertDots){ 
    return text.slice(0, count) + (((text.length > count) && insertDots) ? "..." : ""); 
} 

console.log(fn("aognaglkanglnagln", 10, true)); 
console.log(fn("aognaglkanglnagln", 10, false)); 

Answer 10

Hãy thử điều này :)

var mystring = "How do I get a long text string"; 
mystring = mystring.substring(0,10); 
alert(mystring);