Усечение строки прямой JavaScript

Я хотел бы обрезать динамически загруженную строку, используя прямой JavaScript. Это url, поэтому нет пробелов, и я, очевидно, не забочусь о границах слов, просто символов.

Вот что я получил:

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

Ответ 1

Используйте метод substring:

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

Ответ 2

да, подстрока. Вам не нужно делать Math.min; подстрока с более длинным индексом, чем длина строки заканчивается на исходной длине.

Но!

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

Это ошибка. Что, если у document.referrer был апостроф? Или различные другие символы, которые имеют особое значение в HTML. В худшем случае код злоумышленника в реферере может добавить JavaScript на вашу страницу, что является дырой в безопасности XSS.

Несмотря на то, что это позволяет избежать символов в пути вручную, чтобы остановить это, это немного боль. Вам лучше использовать DOM-методы, чем возиться со строками innerHTML.

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

Ответ 3

Думал, что дам Sugar.js упоминание. У этого есть метод усечения, который довольно умный.

В документации :

Усекает строку. Если split не является истинным, truncate не будет разбить слова вверх, а вместо этого отбросить слово, в котором произошло усечение.

Пример:

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

Вывод:

just sitting on...

Ответ 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('');
    }

Ответ 5

Вот один из способов, который вы можете использовать. Это ответ на один из проблем FreeCodeCamp:

function truncateString(str, num) {


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

Ответ 6

Да, 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;
};

Ответ 7

Обновленная версия 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...'

Ответ 8

в случае, если вы хотите усечь по слову.

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

Ответ 9

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>