Відображати лише 10 символів довгого рядка?

Як отримати довгий текстовий рядок (наприклад, рядок запиту) для відображення максимум 10 символів за допомогою JQuery?

Вибачте, хлопці, я новачок у JavaScript & JQuery: S
Будь-яка допомога буде вдячна.

Якщо я правильно розумію, ви хочете обмежити рядок до 10 символів?

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

Щось таке?

І ось приклад 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.

Створення власної відповіді, оскільки ніхто не вважав, що розколу може не статися (коротший текст). У цьому випадку ми не хочемо додавати '...' як суфікс.

Тернарний оператор це розбере:

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

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

Змінна результату містить "Я занадто л ..."

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

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

Що ви також повинні зробити, якщо скоротити рядок до десяти символів, це додати фактичну суть еліпсів html: …замість трьох крапок.

Мені це більше схоже на те, що ти, мабуть, хочеш.

$(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

Хоча це не обмежить рядок рівно 10 символами, чому б не дозволити браузеру виконувати роботу за вас із CSS:

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

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

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

Спробуйте це :)

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

Показати цей "довгий текст довгий текст довгий текст довгий текст довгий текст довгий текст довгий текст довгий текст довгий текст довгий текст довгий текст довгий текст довгий текст довгий текст довгий текст довгий текст довгий текст довгий текст довгий текст довгий текст довгий текст довгий текст довгий текст довгий текст текст довгий текст довгий текст довгий текст довгий текст довгий текст довгий текст довгий текст довгий текст довгий текст довгий текст довгий текст довгий текст довгий текст довгий текст довгий текст довгий текст довгий текст "

до

довгий текст довгий текст довгий ...

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