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


87

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

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


Можете пояснить на примере?
Andy E

Это jquery, потому что это строка в элементе DOM?
sje397 05

1
@Gopi да, я имею в виду многоточие. Чтобы прояснить ... Я работаю над системой интрасети, где пользователи могут поднимать дела ... некоторые пользователи добавляют сверхдлинную строку запроса, которая нарушает макет таблицы при отображении на домашней странице. Я хочу перехватить эту строку запроса, проверив (с помощью JQuery) все, что содержит 10 символов плюс без пробелов, и преобразуйте его в многоточие (например, this = is-a-really-long & string ...) Пожалуйста, дайте мне знать, имеет ли это смысл. Спасибо
Насир

1
Он работал здесь Good Sucess!
Тран Ань Хиен

браузеры могут автоматически добавлять многоточие к строкам, которые нарушали бы границы элемента (см. мой ответ ниже)
Алнитак

Ответы:


169

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

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

Что-то такое?


15
Оператор if здесь необязателен. str.substring (0,10) в строке, содержащей менее 10 символов, останется неизменным :)
Энди Э

10
но оператор if можно использовать для чего-то вроде: {var str = 'Очень длинная строка'; если (str.length> 10) str = str.substring (0,10) + "..."; }
Дэниел Ведлунд

@Daniel: правда, нужно было бы добавить многоточие. К счастью, я использовал слово « необязательно» :-)
Энди Э

4
@Daniel, "if (str.length> 10) str = str.substring (0,10) +" ... ";}" неверно, потому что строка результата имеет длину 13, а не 10 !! правильно: "if (str.length> 10) str = str.substring (0,10-3) +" ... ";}"
Флойд

1
Вот тест производительности для тех, кому не все равно. Они работают почти так же, если в 50% случаев действительно нужна подстрока.
Хуан Мендес,

22

А вот пример 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.


Привет, Гиу, я не имею дело с текстом, когда он вводится ... скорее, когда он отображается и нарушает макет моей таблицы. Текст строки запроса отображается в DIV с именем .tasks-overflow
Насир

@Nasir Спасибо за подсказку; Я обновил свой ответ; он должен помочь вам решить вашу маленькую проблему
Джузеппе Аккапуто

Привет, Джу, я пробовал твой код, но он не работал. Я хочу, чтобы эта длинная строка «thisisonelooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooongquerystring» отображалась как «thisisonelooo ...»
Насир

Вот как выглядит код: $ (document) .ready (function () {$ (".tasks-overflow: contains ('http: //')") .each (function () {var self = $ (this ), txt = self.text (); txt = txt.replace (/ (http [s] *: [\ / \] {2}) [^ \ s] * / g, '$ 1 ...'); self.text (txt);}); // Giu-код var elem = $ (". tasks-overflow"); if (elem) {if (elem.val (). length> 10) elem.val (elem. val (). substr (0,10))}});
Насир

@ Насир, прости меня; мой старый ответ содержал valметод, который, похоже, не работает для элементов DIV. Я снова обновил свой ответ, и теперь этот textметод используется для изменения текста, который должен работать отлично (снова протестировал его локально). Не могли бы вы снова протестировать его с моим обновленным кодом и сообщить мне?
Джузеппе Аккапуто 05

21

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

Тернарный оператор решит это:

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

19
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

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



5

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

2
.text () более уместен, чем .html (), когда работает только с текстом.
Энди Э

Привет, sje397, мне нужно иметь возможность игнорировать другие слова до и после этой строки (эта строка является длинной строкой запроса и не имеет пробелов), спасибо
Насир

@Nasir - вы можете изменить аргументы на substr ... или вы можете посмотреть регулярные выражения.
sje397 05

4

Что вам также следует сделать при усечении строки до десяти символов, так это добавить фактическую сущность html-эллипсов:, &hellip;а не три точки.


3

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

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


2

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

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

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


1

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


-2

Показать это «длинный текст длинный текст длинный текст длинный текст длинный текст длинный текст длинный текст длинный текст длинный текст длинный текст длинный текст длинный текст длинный текст длинный текст длинный текст длинный текст длинный текст длинный текст длинный текст длинный текст длинный текст длинный текст длинный текст длинный текст длинный текст длинный текст длинный текст длинный текст длинный текст длинный текст длинный текст длинный текст длинный текст длинный текст длинный текст длинный текст длинный текст длинный текст длинный текст длинный текст длинный текст длинный текст

к

длинный текст длинный текст длинный ...

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

Вы рассматриваете слова здесь. В вопросе упоминаются персонажи
Виктор Фернандес
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.