문자열 스트레이트 JavaScript 잘라내기

문자열 스트레이트 JavaScript 잘라내기

스트레이트 JavaScript를 사용하여 동적으로 로드된 문자열을 잘라내고 싶습니다.url이기 때문에 공백이 없고 글자만 신경 쓰지 않습니다.

내가 얻은 건 다음과 같다.

var pathname = document.referrer; //wont work if accessing file:// paths
document.getElementById("foo").innerHTML = "<a href='" + pathname +"'>" + pathname +"</a>"

서브스트링 메서드를 사용합니다.

var length = 3;
var myString = "ABCDEFG";
var myTruncatedString = myString.substring(0,length);
// The value of myTruncatedString is "ABC"

고객님의 경우:

var length = 3;  // set to the number of characters you want to keep
var pathname = document.referrer;
var trimmedPathname = pathname.substring(0, Math.min(length,pathname.length));

document.getElementById("foo").innerHTML =
     "<a href='" + pathname +"'>" + trimmedPathname + "</a>"

사용할 수 있는 방법이 하나 있습니다.다음은 FreeCodeCamp 과제 중 하나에 대한 답변입니다.

function truncateString(str, num) {
  if (str.length > num) {
    return str.slice(0, num) + "...";
  } else {
    return str;
  }
}

네, 서브스트링이요Math.min은 수행할 필요가 없습니다.색인이 문자열 길이보다 긴 하위 문자열은 원래 길이로 끝납니다.

하지만!

document.getElementById("foo").innerHTML = "<a href='" + pathname +"'>" + pathname +"</a>"

이것은 실수이다.document.referrer가 아포스트로피를 삽입했다면?또는 HTML에서 특별한 의미를 갖는 다양한 문자들. 최악의 경우, 레퍼러의 공격자 코드가 당신의 페이지에 JavaScript를 주입할 수 있습니다. 이것은 XSS 보안 구멍입니다.

경로 이름에 포함된 문자를 수동으로 이스케이프하여 이 문제를 방지할 수 있지만, 이는 다소 골칫거리입니다.DOM 메서드를 사용하는 것이 내부적인 것을 만지작거리는 것보다 낫습니다.HTML 문자열

if (document.referrer) {
    var trimmed= document.referrer.substring(0, 64);
    var link= document.createElement('a');
    link.href= document.referrer;
    link.appendChild(document.createTextNode(trimmed));
    document.getElementById('foo').appendChild(link);
}

갱신된 ES6 버전

const truncateString = (string = '', maxLength = 50) => 
  string.length > maxLength 
    ? `${string.substring(0, maxLength)}…`
    : string

// demo the above function
alert(truncateString('Hello World', 4));

다음 코드는 문자열을 잘라내고 단어를 분할하지 않고 잘라낸 단어를 폐기합니다.Sugar.js 소스를 기반으로 합니다.

function truncateOnWord(str, limit) {
        var trimmable = '\u0009\u000A\u000B\u000C\u000D\u0020\u00A0\u1680\u180E\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200A\u202F\u205F\u2028\u2029\u3000\uFEFF';
        var reg = new RegExp('(?=[' + trimmable + '])');
        var words = str.split(reg);
        var count = 0;
        return words.filter(function(word) {
            count += word.length;
            return count <= limit;
        }).join('');
    }

Sugar.js에 대해 언급하려고요그것은 꽤 스마트한 잘라내기 방식을 가지고 있다.

매뉴얼에서 다음 항목을 참조하십시오.

문자열을 잘라냅니다.분할이 true가 아닌 한 단어를 잘라내지 않고 잘라낸 단어가 폐기됩니다.

예제:

'just sittin on the dock of the bay'.truncate(20)

출력:

just sitting on...

네.substring뛰어난 기능:

stringTruncate('Hello world', 5); //output "Hello..."
stringTruncate('Hello world', 20);//output "Hello world"

var stringTruncate = function(str, length){
  var dots = str.length > length ? '...' : '';
  return str.substring(0, length)+dots;
};

1라인의 ES6 솔루션

문자열 길이가 지정된 길이를 초과할 경우 문자열을 잘라내는 대신 끝 문자열도 추가합니다.

const limit = (string, length, end = "...") => {
    return string.length < length ? string : string.substring(0, length) + end
}

limit('Hello world', 5) // Hello...

서브스트링 메서드 외에 이 목적을 위한 작은 JS lib를 찾았습니다.

이것은 문자열을 잘라내기 위한 여러 유용한 메서드를 바닐라 javascript로 가지고 있습니다.

문자별 잘라내기:

var pathname = 'this/is/thepathname';
document.getElementById("foo").innerHTML = "<a class='link' href='" + pathname +"'>" + pathname +"</a>"

// call the plugin - character truncation only needs a one line init
new Cuttr('.link', { length: 10 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/cuttr/1.3.2/cuttr.min.js"></script>

<div id="foo"></div>

추가만 하면 됩니다.class에게a플러그인을 초기화합니다.

여러 줄의 텍스트 클리핑도 가능합니다.
github 페이지의 cuttr.js 문서에 워드 오더 문장 잘라내기 등의 옵션이 기재되어 있습니다.

한 단어로 잘라낼 경우에 대비해서.

function limit(str, limit, end) {

      limit = (limit)? limit : 100;
      end = (end)? end : '...';
      str = str.split(' ');
      
      if (str.length > limit) {
        var cutTolimit = str.slice(0, limit);
        return cutTolimit.join(' ') + ' ' + end;
      }

      return str.join(' ');
    }

    var limit = limit('ILorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus metus magna, maximus a dictum et, hendrerit ac ligula. Vestibulum massa sapien, venenatis et massa vel, commodo elementum turpis. Nullam cursus, enim in semper luctus, odio turpis dictum lectus', 20);

    console.log(limit);

내부 JavaScript 메서드를 사용하여 이 메서드를 수정할 수 있습니다.

const truncate = (text, len) => {
  if (text.length > len && text.length > 0) {
    return `${text.split(" ").slice(0, len).join(" ")} ...`;
  } else {
    return text;
  }
};

var str = "Anything you type in.";
str.substring(0, 5) + "" //you can type any amount of length you want

var pa = document.getElementsByTagName('p')[0].innerHTML;
var rpa = document.getElementsByTagName('p')[0];
// console.log(pa.slice(0, 30));
var newPa = pa.slice(0, 29).concat('...');
rpa.textContent = newPa;
console.log(newPa)

<p>
some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here
</p>

제한(기호)으로 잘라내지만 긴 텍스트(예: 게시물 머리)가 아닌 단어를 잘라내지 않으려면(마지막 단어는 그대로 유지) 다음을 수행합니다.

trancWord(str, limit) {
    str = str.split(' ');
    let summ = 0
    for (let [index, value]  of str.entries()) {
        summ  += value.length
        if (summ > limit) {
            let cutTolimit = str.slice(0, index);
            return str.slice(0, index).join(' ') + ' ' + '...';
        }
    }
    return str.join(' ');
}

긴 문자열(일부 긴 Text of Post - Vue-3을 필터로 사용):

trancWord  (str, max){
        if (str.length <= max) { return str; }
        let subString = str.substr(0, max);
        return (str ? subString.substr(0, subString.lastIndexOf(' ')) : subString) + '...';
}

문자열을 특정 길이로 잘라내려면 JavaScript에서 다음 1줄 화살표 함수를 사용합니다.

const truncate = (str, len) => str.slice?.(0, len);
    
console.log(truncate("Hello, World!", 5));
// Expected Output: Hello

는 " " " 를 합니다.String.prototype.slicemethod: 문자열의 청크를 가져와서 원래 문자열은 변경하지 않고 새 문자열로 반환합니다.

언급URL : https://stackoverflow.com/questions/1301512/truncate-a-string-straight-javascript