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

问题描述 投票:0回答:15

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

对不起大家,我是 JavaScript 和 JQuery 的新手:S
任何帮助将不胜感激。

javascript jquery substring string-length
15个回答
218
投票

如果我理解正确的话,你想将字符串限制为 10 个字符吗?

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

有这样的事吗?


36
投票

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

三元运算符将解决这个问题:

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

36
投票
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

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


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 元素。


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

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
投票

当您将字符串截断为十个字符时,您还应该做的是添加实际的 html 省略号实体:

&hellip;
,而不是三个句点。


4
投票

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

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

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


4
投票
A = "a lennnnnnnnnnnnngthy string ";

word = A.substring(0, number_of_words_to_appear) + "...";

console.log(word)

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


3
投票

试试这个:)

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

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

1
投票
const text = 'imathelongtextblablabla'
const showLess = false
{!showLess && `${text.substring(0, 10)}`}
{!showLess && "..."}

0
投票

在 React 中,如果有条件,如果超过 35 个字符,则添加点:

<b>Long String:</b> {longstring.length < 35 ? longstring : longstring.slice(0, 35) + "..."}

-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; } };
    
© www.soinside.com 2019 - 2024. All rights reserved.