긴 문자열의 10 자만 표시 하시겠습니까?

JQuery를 사용하여 최대 10 개의 문자를 표시하는 긴 텍스트 문자열 (예 : 쿼리 문자열)을 얻으려면 어떻게해야합니까?

죄송합니다. 저는 JavaScript & JQuery의 초보자입니다.
어떤 도움을 주시면 대단히 감사하겠습니다.

내가 올바르게 이해한다면 문자열을 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))
    }
});

유의하시기 바랍니다 내가 사용하고 있음을 text대신 val때문에,이 경우 val방법은 DIV 요소와 작동하지 않습니다.

아무도 분할이 발생하지 않았을 것이라고 생각하지 않았기 때문에 자신의 답변을 만듭니다 (짧은 텍스트). 이 경우 접미사로 '...'를 추가하고 싶지 않습니다.

삼항 연산자는 다음과 같이 분류합니다.

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

결과 변수에 "I am too l ..."이 포함됩니다.

('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 자로자를 때해야 할 일은 …세 개의 마침표가 아닌 실제 html ellipses entity :를 추가하는 것입니다.

이것은 아마도 당신이 원하는 것처럼 보입니다.

$(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

좋은 예 Jolly. 단어 수와는 반대로 문자 길이를 제한하는 버전을 업데이트했습니다. 또한 제목을 실제 원본 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;
            }
         };