문자열 바로 JavaScript를 자릅니다


166

직접 JavaScript를 사용하여 동적으로로드 된 문자열을 자르고 싶습니다. URL이므로 공백이 없으며 단어 경계, 문자 만 신경 쓰지 않습니다.

내가 가진 것은 다음과 같습니다.

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

1
어떤 부분을 자르시겠습니까? 귀하의 예는 의도를 잘 전달하지 못합니다.
Larsenal

1
oh ok- 특정 문자 수로 URL을 자르고 싶습니다. "foo"의 innerHTML을 설정할 때 너무 길면 div에서 흘러 나오지 않습니다.
Bob

1
*하지만 var 경로 이름 자체가 아닌 innerHTML 만 있습니다.
Bob

1
왜 CSS를 사용하여 div의 오버플로를 숨기지 않겠습니까? 오버플로 : 숨겨진
사무엘

2
@Samuel UI 방식이 좋지 않기 때문에 사용자가 방금 보낸 URL (document.referrer)을 볼 것으로 예상하고 단축하면 일부만보고 있음을 표시하고 싶습니다. URL의 오류가 없습니다. 그 외에도, 당신이 제안하는 방법은 문자를 반으로 잘라서 끔찍하게 보일 것입니다.
Bob

답변:


333

부분 문자열 방법을 사용하십시오 .

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>"

1
당신은 0에서 시작하는 문자열을 원한다면, SUBSTR 함수는 3 개 적은 문자와 동일한 일을 할 것이다)
jackocnr

1
문자열이 length- 보다 짧은 경우 substr가 이상하게 작동합니다. – 빈 상태로 반환
RozzA

"문자열"이 숫자이면 처리 할 수 .toString().있는 문자열로 변환하기 위해 삽입해야합니다 substring().
not2qubit


16

예, 부분 문자열. 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);
}

혼란 스럽습니다. 귀하의 솔루션이 보안 허점을 어떻게 피합니까?
Bob

10
'createTextNode'및 '.href = ...'와 같은 DOM 메소드를 사용하면 실제 기본 텍스트 값을 직접 설정하게됩니다. HTML 파일 또는 innerHTML을 통해 HTML을 작성할 때는 HTML 이스케이프 규칙을 따라야합니다. 따라서 'createTextNode ('A <B & C ')'는 괜찮지 만 innerHTML을 사용하면 'innerHTML ='A & B & C '라고 말해야합니다.
bobince

11

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

로부터 문서 :

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

예:

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

산출:

just sitting on...

9
Sugar is a Javascript library that extends native objects… JavaScript로 기본 객체를 확장하는 것은 일반적으로 Bad Idea ™로 간주됩니다.
Jezen Thomas

@JezenThomas 때로는 나쁜 생각이 가장 적절한 생각입니다.
viditkothari

10

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

2
만약 결과라면 "..."를 추가하는 것이 좋을 것입니다! == str;
레오 Caseiro

9

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

function truncateString(str, num) {


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

6

ES6 버전 업데이트

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

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

이것은 필요하지 않을 때에도 항상 하위 문자열을 호출합니다.
Clint Eastwood

@ ClintEastwood 좋은 피드백, 나는 대답을 업데이트했습니다. 문자열 길이와 최대 길이를 확인하면 showDots const를 제거하고 더 깔끔하게 만들 수 있습니다. 건배.
Sam Logan

3

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

0

단어별로 자르고 싶을 때.

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


0

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>

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.