लंबी स्ट्रिंग के केवल 10 अक्षर प्रदर्शित करें?


87

मुझे JQuery का उपयोग करके अधिकतम 10 वर्णों को प्रदर्शित करने के लिए एक लंबी पाठ स्ट्रिंग (एक querystring की तरह) कैसे मिलती है?

क्षमा करें दोस्तों मैं जावास्क्रिप्ट और JQuery में नौसिखिया हूँ: एस
किसी भी मदद की बहुत सराहना की जाएगी।


क्या आप एक उदाहरण से स्पष्ट कर सकते हैं?
एंडी ई

क्या यह jquery है क्योंकि यह DOM तत्व में एक स्ट्रिंग है?
sje397

1
@Gopi हां मेरा मतलब है कि स्पष्ट करने के लिए ... मैं एक इंट्रानेट प्रणाली पर काम कर रहा हूं, जहां उपयोगकर्ता मामलों को उठाने में सक्षम हैं ... कुछ उपयोगकर्ता एक सुपर लंबी क्वेरी जोड़ते हैं जो होमपेज पर प्रदर्शित होने पर टेबल लेआउट को तोड़ता है। मैं इस क्वेरिस्ट्रिंग को चेक करके (JQuery का उपयोग करके) किसी भी चीज के लिए रोकना चाहता हूं जो कि 10 वर्णों से अधिक रिक्त स्थान के बिना है और इसे ellipsize करता है (उदाहरण के लिए यह = is-a-really-long-string ...) कृपया मुझे बताएं कि क्या यह समझ में आता है। धन्यवाद
नासिर

1
यह यहाँ अच्छा काम किया !
ट्रॅन Anh Hien

ब्राउज़र स्वचालित रूप से उन तत्वों में दीर्घवृत्त जोड़ सकते हैं जो किसी तत्व की सीमा को तोड़ देंगे (नीचे मेरा उत्तर देखें)
Alnitak

जवाबों:


169

अगर मैं सही ढंग से समझूं तो आप एक स्ट्रिंग को 10 अक्षरों तक सीमित करना चाहते हैं?

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

ऐसा कुछ?


15
अगर बयान यहाँ वैकल्पिक है। str.substring (0,10) एक स्ट्रिंग पर 10 से कम वर्णों के साथ अप्रभावित रहेगा :)
एंडी ई

10
लेकिन अगर इस कथन का उपयोग कुछ इस तरह किया जा सकता है: {var str = 'कुछ बहुत लंबी स्ट्रिंग'; if (str.length> 10) str = str.substring (0,10) + "..."; }
डैनियल वेसलंड

@ डैनियल: सच है, यह एक दीर्घवृत्त जोड़ने के लिए आवश्यक होगा। सौभाग्य से मैंने वैकल्पिक शब्द इस्तेमाल किया :-)
एंडी ई

4
@Daniel, "if (str.length> 10) str = str.substring (0,10)" "...";} "गलत है क्योंकि परिणामी की लंबाई 13 नहीं 10 की लंबाई है !!" सही: "if (str.length> 10) str = str.substring (0,10-3) +" ... ";}"
Floyd

1
यहां देखभाल करने वालों के लिए एक प्रदर्शन परीक्षण किया गया है। वे लगभग उसी तरह से प्रदर्शन करते हैं, जब जिस स्थान पर प्रतिस्थापन की आवश्यकता होती है, वह वास्तव में 50% होता है।
जुआन मेंडेस

22

और यहाँ एक jQuery उदाहरण है:

HTML पाठ क्षेत्र:

<input type="text" id="myTextfield" />

इसका आकार सीमित करने के लिए jQuery कोड:

var elem = $("#myTextfield");
if(elem) elem.val(elem.val().substr(0,10));

एक उदाहरण के रूप में, आप उपयोगकर्ता को टाइप करते समय 10 से अधिक वर्ण दर्ज करने से प्रतिबंधित करने के लिए ऊपर दिए गए jQuery कोड का उपयोग कर सकते हैं; निम्नलिखित कोड स्निपेट ठीक यही करता है:

$(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 तत्व के साथ काम करने के लिए प्रतीत नहीं होता।


हाय Giu, मैं पाठ के साथ काम नहीं कर रहा हूँ जब यह इनपुट हो रहा है ... बल्कि जब यह प्रदर्शित होता है और मेरी तालिका लेआउट को तोड़ता है। Querystring पाठ को DIV नामक एक DIV में प्रदर्शित किया जाता है
Nasir

@ नासिर संकेत के लिए धन्यवाद; मैंने अपना उत्तर अपडेट कर दिया है; यह आपको अपने छोटे मुद्दे को हल करने में मदद करना चाहिए
Giuseppe Accaputo

हाय Giu, मैं अपने कोड की कोशिश की है और यह काम नहीं किया है। मैं चाहता हूं कि इस लंबे तार '' itisonelooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooquerquerring 'के रूप में प्रदर्शित करने के लिए' itisonelooo ... '
नासिर

इस तरह से कोड दिखता है: $ (दस्तावेज़)। पहले से ही (फ़ंक्शन () {$ ("। कार्य-अतिप्रवाह: इसमें ('http: //')") .each (फ़ंक्शन) () {var self = $ (यह है) ), txt = self.text (); txt = txt.replace (/ (http [s] *: [\ / \] {2}) [^ \ s] * / जी, '$ 1 ...'); self.text (txt);}); // Giu कोड var elem = $ ("कार्य-ओवरफ़्लो"); यदि (elem) {if (elem.val ()। लंबाई> 10) elem.val (एलएम)। val ()। सबस्टिट्यूट (0,10))}});
नासिर

@ नासिर मुझे माफ़ करना; मेरे पुराने उत्तर में वह valविधि थी, जो DIV तत्वों के लिए काम नहीं करती है। मैंने अपना उत्तर फिर से अपडेट किया है, और अब textपाठ को बदलने के लिए विधि का उपयोग किया जाता है, जिसे पूरी तरह से काम करना चाहिए (स्थानीय रूप से, फिर से परीक्षण किया गया)। क्या आप कृपया इसे मेरे अद्यतन कोड के साथ फिर से परीक्षण कर सकते हैं और मुझे बता सकते हैं
Giuseppe Accaputo

21

खुद का जवाब बनाना, जैसा कि किसी ने भी नहीं माना है कि विभाजन नहीं हुआ है (छोटा पाठ)। उस स्थिति में हम प्रत्यय के रूप में '...' नहीं जोड़ना चाहते हैं।

टर्नरी ऑपरेटर को छांटना होगा:

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

19
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

परिणाम चर में "मैं बहुत एल हूँ ..."



5

एचटीएमएल

<p id='longText'>Some very very very very very very very very very very very long string</p>

जावास्क्रिप्ट (डॉक्टर पर तैयार)

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

2
.text () .html से अधिक उपयुक्त है ( केवल पाठ से निपटने के दौरान )
एंडी ई

हाय sje397, मुझे इस स्ट्रिंग से पहले और बाद में अन्य शब्दों को अनदेखा करने में सक्षम होने की आवश्यकता है (यह स्ट्रिंग एक लंबी querystring है और कोई रिक्त स्थान नहीं है) धन्यवाद
नासिर

@ नासिर - आप तर्कों को जड़ में बदल सकते हैं ... या आप नियमित अभिव्यक्तियों को देखना चाहते हैं।
sje397

4

जब आप स्ट्रिंग को दस वर्णों तक काटते हैं तो आपको क्या करना चाहिए, वास्तविक HTML दीर्घवृत्त इकाई को जोड़ते हैं: &hellip;बल्कि तीन अवधियों से।


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 कैरेक्टर लंबे वर्जन के साथ बदल देता है और इसे आपको लौटा देता है। यह थोड़ा अजीब लगता है केवल 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: // को चीर देगा और www.example.com के 10 चार्टर्स तक प्रिंट करेगा


2

यद्यपि यह स्ट्रिंग को ठीक 10 वर्णों तक सीमित नहीं करेगा, फिर भी ब्राउज़र सीएसएस के साथ आपके लिए काम क्यों नहीं करेगा:

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

और फिर तालिका कक्ष के लिए जिसमें स्ट्रिंग शामिल है उपरोक्त वर्ग को जोड़ें और अधिकतम अनुमत चौड़ाई सेट करें। स्ट्रिंग की लंबाई को मापने के आधार पर किए गए परिणाम से बेहतर दिखने का परिणाम होना चाहिए।


1

@ jolly.exe

अच्छा उदाहरण जॉली। मैंने आपके संस्करण को अपडेट किया जो शब्दों की संख्या के विपरीत चरित्र की लंबाई को सीमित करता है। मैंने शीर्षक को वास्तविक मूल इनर HTML में भी जोड़ा है, ताकि उपयोगकर्ता हॉवर कर सकें और देख सकें कि क्या छोटा है।

एचटीएमएल

<div id="stuff">a reallly really really long titleasdfasdfasdfasdfasdfasdfasdfadsf</div> 

जे एस

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


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

आप यहाँ शब्दों पर विचार कर रहे हैं। इस प्रश्न में वर्णों का उल्लेख है
विक्टर फर्नांडीस
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.