문자열 바로 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>"

---

예, 부분 문자열. Math.min을 수행 할 필요는 없습니다. 문자열 길이보다 긴 색인을 가진 부분 문자열은 원래 길이로 끝납니다.

그러나!

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

이것은 실수입니다. document.referrer에 아포스트로피가 있으면 어떻게해야합니까? 또는 HTML에서 특별한 의미를 가진 다양한 다른 문자들. 최악의 경우 리퍼러의 공격자 코드가 JavaScript를 페이지에 삽입 할 수 있는데, 이는 XSS 보안 취약점입니다.

이 문제를 막기 위해 경로 이름의 문자를 수동으로 벗어날 수는 있지만 약간의 고통이 있습니다. innerHTML 문자열로 처리하는 것보다 DOM 메소드를 사용하는 것이 좋습니다.

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

---

Sugar.js 에 언급 할 것이라고 생각했습니다 . 그것은 꽤 똑똑한 절단 방법을 가지고 있습니다.

로부터 문서 :

문자열을 자릅니다. split이 true가 아닌 경우 잘림은 단어를 분할하지 않고 잘림이 발생한 단어를 버립니다.

예:

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

산출:

just sitting on...

---

다음 코드는 문자열을 자르고 단어를 분리하지 않고 잘림이 발생한 단어를 버립니다. 완전히 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('');
    }

---

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

function truncateString(str, num) {


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

---

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

---

ES6 버전 업데이트

const truncateString = (string, maxLength = 50) => {
  if (!string) return null;
  const showDots = string.length > maxLength;
  return `${string.substring(0, maxLength)}${showDots ? '...' : ''}`;
};

truncateString('what up', 4); // returns 'what...'

---

in case you want to truncate by word.

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

---

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>

참고URL : https://stackoverflow.com/questions/1301512/truncate-a-string-straight-javascript