Làm cách nào để tôi có được một chuỗi văn bản dài (như một 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 các bạn, tôi là người mới học JavaScript & JQuery: S
Mọi sự giúp đỡ sẽ được đánh giá rất cao.
Làm cách nào để tôi có được một chuỗi văn bản dài (như một 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 các bạn, tôi là người mới học JavaScript & JQuery: S
Mọi sự giúp đỡ sẽ được đánh giá rất cao.
Câu trả lời:
Nếu tôi hiểu đúng, bạn muốn giới hạn một chuỗi trong 10 ký tự?
var str = 'Some very long string';
if(str.length > 10) str = str.substring(0,10);
Một cái gì đó như vậy?
Và đây là một ví dụ về jQuery:
Trường văn bản HTML:
<input type="text" id="myTextfield" />
mã jQuery để giới hạn 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 nhiều hơn 10 ký tự khi đang nhập; đoạn mã sau thực hiện chính xác điều 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ị cách sử dụng mẫu.
Đoạn mã sau sẽ xử lý sự cố của bạn với 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 ý rằng tôi đang sử dụng text
thay vì val
trong trường hợp này, vì val
phương pháp dường như không hoạt động với phần tử DIV.
val
phương thức, có vẻ như không hoạt động với các phần tử DIV. Tôi đã cập nhật câu trả lời của mình một lần nữa và bây giờ text
phương pháp được sử dụng để thay đổi văn bản, sẽ hoạt động hoàn hảo (đã kiểm tra lại nó cục bộ). Bạn có thể vui lòng kiểm tra lại nó với mã đã cập nhật của tôi và cho tôi biết không?
Tạo câu trả lời của riêng mình, vì chưa ai cho rằng sự phân tách 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ố.
Toán tử bậc ba sẽ sắp xếp điều đó:
var text = "blahalhahkanhklanlkanhlanlanhak";
var count = 35;
var result = text.slice(0, count) + (text.length > count ? "..." : "");
Có thể được đóng lại để hoạt độ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 trợ giúp để Bạn thậm chí có thể chọn xem Bạn có muốn dấu 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));
var example = "I am too long string";
var result;
// Slice is JS function
result = example.slice(0, 10)+'...'; //if you need dots after the string you can add
Biến kết quả chứa "I am too l ..."
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 từ bị giới hạn ở nhiều nhất 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);
Điều này đối với tôi 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 cung cấp cho nó phần tử html của bạn ở dòng đầu tiên và sau đó nó lấy toàn bộ văn bản, thay thế các url bằng các phiên bản dài 10 ký tự và trả lại 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) + "..."
});
}});
sẽ tách ra http: // hoặc https: // và in tối đa 10 charaters của www.example.com
Mặc dù điều này sẽ không giới hạn chuỗi chính xác 10 ký tự, nhưng tại sao không để trình duyệt thực hiện công việc cho bạn với CSS:
.no-overflow {
white-space: no-wrap;
text-overflow: ellipsis;
overflow: hidden;
}
và sau đó đối với ô bảng có chứa chuỗi, hãy thêm lớp trên và đặt chiều rộng tối đa cho phép. Kết quả cuối cùng sẽ trông đẹp hơn bất cứ thứ gì được thực hiện dựa trên việc đo chiều dài chuỗi.
@ jolly.exe
Ví dụ đẹp đấy 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ố lượng từ. Tôi cũng đã thêm việc đặt tiêu đề thành innerHTML gốc thực sự, để 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');
Thử đi :)
var mystring = "How do I get a long text string";
mystring = mystring.substring(0,10);
alert(mystring);
Hien thi nay "văn bản dài văn bản văn bản dài văn bản văn bản dài văn bản văn bản dài văn bản văn bản dài văn bản văn bản dài văn bản văn bản dài văn bản văn bản dài văn bản văn bản dài văn bản văn bản dài văn bản văn bản dài văn bản văn bản dài văn bản văn bản dài văn bản văn bản dài văn bản văn bản dài văn bản văn bản dài văn bản văn bản dài văn bản văn bản dài văn bản văn bản dài văn bản văn bản dài văn bản văn bản dài văn bản
đến
văn bản 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;
}
};