只显示一个长字符串的10个字符?

时间:2010-08-05 13:05:53

标签: javascript jquery substring string-length

如何使用JQuery获取长文本字符串(如查询字符串)以显示最多10个字符?

对不起家伙我是JavaScript& JQuery:S
任何帮助将不胜感激。

12 个答案:

答案 0 :(得分:137)

如果我理解正确,您希望将字符串限制为10个字符?

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

那样的东西?

答案 1 :(得分:18)

这是一个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元件。

答案 2 :(得分:11)

创建自己的答案,因为没有人认为可能没有发生拆分(较短的文本)。在这种情况下,我们不想添加“...”作为后缀。

三元运营商会对此进行排序:

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

答案 3 :(得分: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);

答案 4 :(得分:5)

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

答案 5 :(得分:4)

当您将字符串截断为十个字符时,您还应该执行的操作是添加实际的html省略号实体:&hellip;,而不是三个句点。

答案 6 :(得分:4)

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

结果变量包含“我太...”

答案 7 :(得分: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元素然后它需要整个文本,用10个字符长的版本替换url并返回给你。 这似乎有点奇怪,只有3个网址字符,所以如果可能我会推荐这个。

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

答案 8 :(得分:1)

@ jolly.exe

很好的例子Jolly。我更新了你的版本,它限制了字符长度而不是字数。我还添加了将标题设置为真正的原始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'); 

答案 9 :(得分:1)

尽管这不会将字符串限制为恰好10个字符,但为什么不让浏览器使用CSS为您完成工作:

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

,然后为包含字符串的表单元格添加以上类并设置最大允许宽度。结果应该看起来比基于测量字符串长度的任何操作都要好。

答案 10 :(得分:0)

试试这个:)

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

答案 11 :(得分:-1)

显示此&#34;长文长文长文长文长文长文长文长文长文长文长文长文长文长文长文长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本文本长文本长文本长文本文本#34;

长文字长文 ...

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