web-dev-qa-db-ja.com

長い文字列の10文字のみを表示しますか？

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

申し訳ありませんが、私はJavaScriptとJQueryの初心者です：S
ご協力いただければ幸いです。

javascriptjquerysubstringstring-length
68
Nasir

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

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

そんな感じ？

145
Sebs

次に、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要素では機能しないようです。

20
Giuseppe Accaputo

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

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

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));
11
Tatranskymedved
('very long string'.slice(0,10))+'...'
// "very long ..."
8
Kai Light
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 ...」が含まれています

7
Ranjita Naik

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

また、文字列を10文字に切り捨てるときに行うべきことは、3つのピリオドではなく、実際のhtml省略形エンティティ&hellip;を追加することです。

4
Ken Ray

これは、おそらくあなたが望むもののように思えます。

$(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文字が印刷されます。

3
mraaroncruz

これにより、文字列が正確に10文字に制限されることはありませんが、CSSを使用してブラウザに作業を行わせてください。

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

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

1
Alnitak

@ 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
DaFrenzy

これを試して ：）

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