只显示 10 个字符的长字符串？答案

【问题标题】：Display only 10 characters of a long string?只显示 10 个字符的长字符串？
【发布时间】：2011-03-25 19:14:39
【问题描述】：

如何使用 JQuery 获得一个长文本字符串（如查询字符串）以显示最多 10 个字符？

对不起，我是 JavaScript 和 JQuery 的新手：S
任何帮助将不胜感激。

【问题讨论】：

你能举个例子说明一下吗？
是jquery，因为它是DOM元素中的字符串吗？
@Gopi 是的，我的意思是 ellipsize 澄清一下...我正在开发一个用户可以提出案例的 Intranet 系统...一些用户添加了一个超长的查询字符串，它在显示时会破坏表格布局在主页上。我想通过检查（使用 JQuery）任何 10 个字符加上不带空格的内容并将其省略（例如 this=is-a-really-long&string... ）来截取这个查询字符串。如果这有意义，请告诉我。谢谢
它在here 成功！
浏览器可以自动将省略号添加到会破坏元素边界的字符串中（请参阅下面的答案）

标签： javascript jquery substring string-length

【解决方案1】：

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

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

类似的东西？

【讨论】：

if 语句在这里是可选的。 str.substring(0,10) 在少于 10 个字符的字符串上将不受影响:)
但是 if 语句可以用于类似：{ var str = 'Some very long string'; if(str.length > 10) str = str.substring(0,10)+"..."; }
@Daniel：是的，添加省略号是必要的。幸运的是，我使用了 optional 这个词 :-)
@Daniel, "if(str.length > 10) str = str.substring(0,10)+"..."; }" 错误，因为结果字符串的长度为 13 而不是10！！正确：“if(str.length > 10) str = str.substring(0,10-3)+"..."; }"
Here's a performance test 对于那些关心的人。如果实际需要子字符串的情况发生在 50% 的时间，它们的性能几乎相同。

【解决方案2】：

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

三元运算符会解决这个问题：

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

并扩展为 helpers 类，这样您甚至可以选择是否需要这些点：

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】：

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

结果变量包含“I am too l...”

【讨论】：

【解决方案4】：

这是一个 jQuery 示例：

HTML 文本字段：

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

jQuery 代码限制其大小：

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

例如，您可以使用上面的 jQuery 代码来限制用户在输入时输入超过 10 个字符；以下代码 sn-p 正是这样做的：

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

更新：上面的代码 sn -p 仅用于显示示例用法。

以下代码 sn-p 将处理您与 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 元素。

【讨论】：

嗨，Giu，我不是在输入文本时处理它......而是在它显示并破坏我的表格布局时。查询字符串文本显示在名为 .tasks-overflow 的 DIV 中
@Nasir 感谢您的提示；我已经更新了我的答案；它应该可以帮助您解决您的小问题
嗨，Giu，我已经尝试了您的代码，但没有成功。我希望这个长字符串 'thisisonelooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooongquerystring' 显示为 '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)) } });
@Nasir 对不起；我的旧答案包含 val 方法，该方法似乎不适用于 DIV 元素。我再次更新了我的答案，现在text 方法用于更改文本，它应该可以完美运行（再次在本地测试）。你能用我更新的代码再次测试它并告诉我吗？

【解决方案5】：

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

【讨论】：

【解决方案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);

【讨论】：

.text() 在仅处理文本时比 .html() 更合适。
嗨 sje397，我需要能够忽略此字符串之前和之后的其他单词（此字符串是一个长查询字符串并且没有空格）谢谢
@Nasir - 您可以将参数更改为 substr...或者您可能想查看正则表达式。

【解决方案7】：

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

【讨论】：

【解决方案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 元素，然后它获取整个文本，用 10 个字符长的版本替换 url 并将其返回给你。只有 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

【讨论】：

【解决方案9】：

试试这个:)

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

【讨论】：

【解决方案10】：

虽然这不会将字符串限制为恰好 10 个字符，但为什么不让浏览器使用 CSS 为您完成工作：

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

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

【讨论】：

【解决方案11】：

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

【讨论】：

【解决方案12】：

显示此"长文长文长文长文长文长文长文长文长文长文长文长文长文长文长文长文长文长文长文长文长文长文长文长文长文长文长文长文长文长文长文长文长文长文长文长文长文长文长文长文长文长文长文长文长文长文长文长文长文长文长文长文长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本“

到

长文本长文本长...

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

【讨论】：

你在这里考虑的话。问题提到字符