javascript - 長い文字列の 10 文字だけを表示しますか?

Question

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

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

Answer 1

私の理解が正しければ、文字列を 10 文字に制限したいですか?

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

そんな感じ？

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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

$(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:// を切り取って、最大 10 文字の www.example.com を出力します。

Answer 7

@ジョリー.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'); 

Answer 8

これを表示する"長いテキスト 長いテキスト 長いテキスト 長いテキスト 長いテキスト 長いテキスト 長いテキスト 長いテキスト 長いテキスト 長いテキスト 長いテキスト 長いテキスト 長いテキスト 長いテキスト 長いテキスト 長いテキスト 長いテキスト 長いテキスト 長いテキスト 長いテキスト 長いテキスト 長いテキスト長いテキスト 長いテキスト 長いテキスト 長いテキスト 長いテキスト 長いテキスト 長いテキスト 長いテキスト 長いテキスト 長いテキスト 長いテキスト 長いテキスト 長いテキスト 長いテキスト 長いテキスト "

に

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

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