Отображать только 10 символов длинной строки?

Question

Как получить длинную текстовую строку (например, строку запроса) для отображения максимум 10 символов с использованием JQuery?

Извините, ребята, я новичок в JavaScript и JQuery: S
Любойпомощь будет принята с благодарностью.

Answer 1

Если я правильно понимаю, вы хотите ограничить строку до 10 символов?

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

Что-то в этом роде?

Answer 2

А вот пример jQuery:

Текстовое поле HTML:

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

Код jQuery для ограничения его размера:

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

В качестве примера вы могли быиспользуйте приведенный выше код jQuery, чтобы запретить пользователю вводить более 10 символов во время набора текста;следующий фрагмент кода делает именно это:

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

---

Обновление : приведенный выше фрагмент кода использовался только для демонстрации примера использования.

Следующий фрагмент кода решит проблему с элементом DIV:

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

Обратите внимание, , что я использую text вместо val вв этом случае, поскольку метод val не работает с элементом DIV.

Answer 3

Создание собственного ответа, поскольку никто не считал, что разделение может не произойти (более короткий текст). В этом случае мы не хотим добавлять «...» в качестве суффикса.

Тернарный оператор разберется с этим:

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

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

Может быть закрыт для работы:

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

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

И перейдите к классу помощников, чтобы Вы даже могли выбрать, хотите ли вы точки или нет:

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 4

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

Answer 5

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

Переменная результата содержит "Я слишком л ..."

Answer 6

html

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

javascript (при условии готовности документа)

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

Если в тексте несколько слов, иЧтобы каждый из них был ограничен максимум 10 символами, вы можете сделать следующее:

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 7

Когда вы усекаете строку до десяти символов, вам также следует добавить фактическую сущность эллипсов html: …, а не три периода.

Answer 8

Для меня это больше похоже на то, что вы, вероятно, хотите.

$(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) + "..."
    });
}});

Вы даете ему свой HTML-элемент в первой строке, а затем он берет весь текст, заменяет URL-адреса 10-значными версиями и возвращает его вам. Кажется немного странным иметь только 3 символа url, поэтому я рекомендую это, если это возможно.

$(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) + "..."
    });
}});

, который вырвет http: // или https: // и напечатает до 10 символов www.example.com

Answer 9

Хотя это не будет ограничивать строку ровно 10 символами, почему бы не позволить браузеру выполнить работу за вас с помощью CSS:

.no-overflow {
    white-space: no-wrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

и затем для ячейки таблицы, содержащей строку, добавьте вышеуказанный класс и установите максимально допустимую ширину. Результат должен выглядеть лучше, чем что-либо, основанное на измерении длины строки.

Answer 10

@jolly.exe

Хороший пример, Джолли. Я обновил вашу версию, которая ограничивает длину символа, а не количество слов. Я также добавил установку заголовка для настоящего оригинального innerHTML, чтобы пользователи могли наводить курсор и видеть, что усечено.

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