Показать только 10 символов длинной строки?

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

Извините, ребята, я новичок в 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;
            }
         };