100

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

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

4

13 回答 13

195

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

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

类似的东西？

于 2010-08-05T13:09:16.297 回答
29

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

三元运算符将对其进行排序：

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));
于 2017-06-29T09:25:55.967 回答
27 
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

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

于 2018-12-03T11:44:47.330 回答
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 元素。

于 2010-08-05T13:15:07.243 回答
13 
('very long string'.slice(0,10))+'...'
// "very long ..."
于 2017-01-09T06:06:22.297 回答
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);
于 2010-08-05T13:12:03.720 回答
4

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

于 2010-08-05T14:32:10.707 回答
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 个 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

于 2010-08-05T15:09:12.797 回答
3

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

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

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

于 2018-12-03T12:12:32.473 回答
3

尝试这个 ：）

var mystring = "How do I get a long text string";
mystring = mystring.substring(0,10);
alert(mystring);
于 2017-09-15T07:21:19.653 回答
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');
于 2014-06-19T00:00:10.980 回答
0

常量文本 = 'imathelongtextblablabla';
常量 showLess = false;
{!showLess && ${text.substring(0, 10)}}

{！显示较少 ＆＆ ”...”}

于 2022-03-01T10:15:06.030 回答
-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;
            }
         };
于 2014-04-24T12:40:30.537 回答