長い文字列を10文字だけ表示しますか？

JQueryを使用して、長いテキスト文字列（クエリ文字列など）を取得して最大10文字を表示するにはどうすればよいですか？

申し訳ありませんが、私はJavaScriptとJQueryの初心者です：S
どんな助けでも大歓迎です。

私が正しく理解していれば、文字列を10文字に制限したいですか？

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

そんな感じ？

そして、これが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))
    }
});

このメソッドはDIV要素では機能しないようであるため、この場合のtext代わりにを使用していることに注意してください。valval

分割が発生しなかった可能性があると誰も考えていないため、独自の回答を作成します（短いテキスト）。その場合、接尾辞として「...」を追加したくありません。

三項演算子はそれを整理します：

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

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

結果変数に「Iamtool ...」が含まれています

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

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

文字列を10文字に切り捨てるときにも行う必要があるの…は、3つのピリオドではなく、実際のhtml省略記号エンティティを追加することです。

これはあなたがおそらく望むもののように私にはもっと見えます。

$(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文字の長さのバージョンに置き換えられて返されます。これは、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：//を取り除いて、www.example.comの最大10文字を印刷します。

これは文字列を正確に10文字に制限するものではありませんが、CSSを使用してブラウザに作業を任せてみませんか。

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

次に、文字列を含むテーブルセルに上記のクラスを追加し、最大許容幅を設定します。結果は、文字列の長さの測定に基づいて行われた何よりも見栄えが良くなるはずです。

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

これを試して ：）

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

これを表示する「長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキストテキストロングテキストロングテキストロングテキストロングテキストロングテキストロングテキストロングテキストロングテキストロングテキストロングテキストロングテキストロングテキストロングテキストロングテキストロングテキストロングテキスト "

に

長いテキスト長いテキスト長い..。

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