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


84

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.


Bạn có thể làm rõ với một ví dụ?
Andy E

Đó có phải là jquery vì nó là một chuỗi trong phần tử DOM không?
sje397

1
@Gopi vâng Ý tôi là dấu chấm lửng Để làm rõ ... Tôi đang làm việc trên một hệ thống mạng nội bộ nơi người dùng có thể đưa ra các trường hợp ... một số người dùng thêm một chuỗi truy vấn siêu dài phá vỡ bố cục bảng khi hiển thị trên trang chủ. Tôi muốn chặn chuỗi truy vấn này bằng cách kiểm tra (sử dụng JQuery) cho bất kỳ thứ gì có 10 ký tự cộng với không có khoảng trắng và kích thước nó lên (ví dụ: this = is-a-really-long & string ...) Vui lòng cho tôi biết nếu điều này có ý nghĩa. Cảm ơn
Nasir

1
Nó đã hoạt động ở đây Good Sucess!
Trần Anh Hiền

trình duyệt có thể tự động thêm ellipsis để chuỗi sẽ phá vỡ các giới hạn của một phần tử (xem câu trả lời của tôi dưới đây)
Alnitak

Câu trả lời:


166

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?


15
Các nếu tuyên bố là tùy chọn tại đây. str.substring (0,10) trên một chuỗi có ít hơn 10 ký tự sẽ vẫn không bị ảnh hưởng :)
Andy E

10
nhưng câu lệnh if có thể được sử dụng cho một số thứ như: {var str = 'Một số chuỗi rất dài'; if (str.length> 10) str = str.substring (0,10) + "..."; }
Daniel Wedlund

@Daniel: đúng, nó sẽ là cần thiết để thêm dấu chấm lửng. May mắn thay, tôi đã sử dụng từ tùy chọn :-)
Andy E

4
@Daniel, "if (str.length> 10) str = str.substring (0,10) +" ... ";}" là sai vì chuỗi kết quả có độ dài là 13 chứ không phải 10 !! đúng: "if (str.length> 10) str = str.substring (0,10-3) +" ... ";}"
Floyd

1
Đây là bài kiểm tra hiệu suất cho những ai quan tâm. Chúng hoạt động gần như giống nhau nếu trường hợp chuỗi con thực sự cần thiết xảy ra 50% thời gian.
Juan Mendes

22

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 textthay vì valtrong trường hợp này, vì valphương pháp dường như không hoạt động với phần tử DIV.


Xin chào, tôi không xử lý văn bản khi nó đang được nhập ... mà là khi nó được hiển thị và phá vỡ bố cục bảng của tôi. Văn bản chuỗi truy vấn được hiển thị trong DIV được gọi là .tasks-tràn
Nasir

@Nasir Cảm ơn vì gợi ý; Tôi đã cập nhật câu trả lời của mình; nó sẽ giúp bạn giải quyết vấn đề nhỏ của mình
Giuseppe Accaputo

Chào Giu, tôi đã thử mã của bạn và nó không hoạt động. Tôi muốn chuỗi dài 'thisisonelooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooongquerystring' hiển thị dưới dạng 'thisisonelooo ...'
Nasir

Đây là cách mã trông: $ (tài liệu) .ready (function () {$ (".tasks-tràn: chứa ('http: //')") .each (function () {var self = $ (this ), txt = self.text (); txt = txt.replace (/ (http [s] *: [\ / \] {2}) [^ \ s] * / g, '$ 1 ...'); self.text (txt);}); // Giu code var elem = $ (". task-tràn"); if (elem) {if (elem.val (). length> 10) elem.val (elem. val (). substr (0,10))}});
Nasir

@Nasir Tôi xin lỗi; câu trả lời cũ của tôi có chứa valphươ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ờ textphươ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?
Giuseppe Accaputo

19

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

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



5

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

2
.text () thích hợp hơn .html () khi chỉ xử lý văn bản.
Andy E

Xin chào sje397, tôi cần có thể bỏ qua các từ khác trước và sau chuỗi này (chuỗi này là một chuỗi truy vấn dài và không có khoảng trắng) cảm ơn
Nasir

@Nasir - bạn có thể thay đổi các đối số thành substr ... hoặc bạn có thể muốn xem biểu thức chính quy.
sje397

4

Những gì bạn cũng nên làm khi cắt ngắn chuỗi còn mười ký tự là thêm thực thể html hình elip thực tế:, &hellip;thay vì ba dấu chấm .


3

Đ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


2

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.


1

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

1

Thử đi :)

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

-2

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

Bạn đang cân nhắc các từ ở đây. Câu hỏi đề cập đến các nhân vật
Victor Fernandes
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.