Обрезать строку прямо JavaScript

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

Вот что у меня получилось:

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

person Bob    schedule 19.08.2009    source источник
comment
Какую часть вы хотите обрезать? Ваш пример не очень хорошо передает намерение.   -  person Larsenal    schedule 19.08.2009
comment
о, хорошо, я хочу обрезать URL-адрес до определенного количества символов, чтобы, когда я устанавливаю innerHTML для foo, он не вытекал из div, если он слишком длинный.   -  person Bob    schedule 19.08.2009
comment
* но - только innerHTML, а не сам путь к var.   -  person Bob    schedule 19.08.2009
comment
Почему бы просто не использовать CSS, чтобы скрыть переполнение div? переполнение: скрыто   -  person Samuel    schedule 19.08.2009
comment
@Samuel Потому что это было бы плохой практикой с точки зрения пользовательского интерфейса - если пользователь ожидает увидеть URL-адрес, с которого он только что пришел (document.referrer), и я сокращаю его, я хочу указать им, что они видят только часть URL-адреса и ошибки не было. Кроме того, предлагаемый вами метод разрезал бы персонажей пополам, что выглядело бы ужасно.   -  person Bob    schedule 20.08.2009
comment
вы должны использовать css   -  person zamzam    schedule 29.09.2016


Ответы (8)


Используйте метод 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>"
person Larsenal    schedule 19.08.2009
comment
Если вы хотите, чтобы подстрока начиналась с 0, тогда функция substr будет делать то же самое с на 3 символа меньше;) - person jackocnr; 21.09.2014
comment
substr ведет себя странно, если строка короче length - возвращает пустую - person RozzA; 27.03.2015
comment
Если ваша строка является числом, вам также необходимо вставить .toString()., чтобы преобразовать его в строку, которую может обработать substring(). - person not2qubit; 26.01.2018
comment

да, подстрока. Вам не нужно делать 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);
}
person bobince    schedule 19.08.2009
comment
Я запутался, как ваше решение позволяет избежать дыры в безопасности? - person Bob; 20.08.2009
comment
Когда вы используете методы DOM, такие как «createTextNode» и «.href = ...», вы напрямую устанавливаете реальное базовое значение открытого текста. Когда вы пишете HTML в файле HTML или с помощью innerHTML, вы должны соблюдать правила экранирования HTML. Итак, пока «createTextNode ('A‹ B&C') »подойдет, с innerHTML вам придется сказать« innerHTML = 'ABC' ». - person bobince; 20.08.2009

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

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

Следующий код усекает строку и не разделяет слова, а вместо этого отбрасывает слово, в котором произошло усечение. Полностью основано на исходном коде 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('');
    }
person Beto Frega    schedule 27.10.2015
comment
Было бы неплохо добавить ... if result! == str; - person Leo Caseiro; 19.09.2016

Подумал, что стоит упомянуть Sugar.js. Он имеет довольно умный метод усечения.

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

Truncates a string. Unless split is true, truncate will not split words up, and instead discard the word where the truncation occurred.

Пример:

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

Выход:

just sitting on...
person Brian    schedule 28.03.2012
comment
Sugar is a Javascript library that extends native objects… Расширение собственных объектов в JavaScript обычно считается плохой идеей ™. - person Jezen Thomas; 22.07.2015
comment
@JezenThomas Иногда плохая идея - самая подходящая идея. - person viditkothari; 02.03.2020

Обновленная версия ES6

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

// demo the above function
console.log(
  truncateString(prompt("", "This is a test"), 4)
)

person Sam Logan    schedule 28.08.2019
comment
это всегда вызывает подстроку, даже если в этом нет необходимости ... - person Clint Eastwood; 10.01.2020
comment
@ClintEastwood хороший отзыв, я обновил ответ. Проверка длины строки по сравнению с максимальной длиной также означала, что я могу удалить константу showDots и тройную, делая ее более аккуратной. Ваше здоровье. - person Sam Logan; 12.01.2020

Да, 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;
};
person Arnaud Anato    schedule 27.09.2018

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

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

person Fhulufhelo Mokhomi    schedule 26.06.2019