Angular js ellipsis

Question

Есть ли способ, которым мы можем использовать угловые js для подстроки строки и добавления эллипсиса в конце, игнорируя тег привязки, если он входит в подстроку?

Например, мой текст:

Lorem Ipsum является стандартной текст манекен в отрасли с тех пор 1500-х годов, когда неизвестный принтер принял камбуз типа и кинулись его, чтобы сделать книгу типа образца ,

Я могу показать текст до 70 символов после этого многоточия.

В этом случае от «55 - 100 approx» находится привязка, подстрока обрезает строку с 0,70 и создает плохую строку со сломанной привязной ссылкой.

на HTML, я использую:

> data-ng-bind-html 

разобрать подстроки.

Как мы можем игнорировать < a href="something.html" > </a> Тэги внутри строки и подстроки другого содержания?

Не хотите использовать CSS, поскольку контент может быть любой длины.

фильтр используется:

filter('customEllipsis', function() { 
     return function(input, number) { 
      if (input) { 
       return input.length > number ? input.substring(0, number) + '...' : input; 
      } 
     }; 
    }); 

Answer 1

Вы можете использовать встроенный фильтр limitTo

Answer 2

Использование Angular sanitizer для разбора HTML ANGULAR в. См. Этот пример jsbin.

app.filter('customEllipsis', function($sce) { 
    return function(input, number) { 
    if (input) { 
     input = input.length > number ? input.substring(0, number) + '...' : input; 
     input = $sce.trustAsHtml(input); 
     return input; 
    } 
    }; 
}); 

Answer 3

Вот решение, которое:

1. Преобразует содержимое HTML к DOM документа
2. Выполняет глубину первой обход документа
3. Оценивает все текстовые узлы, отрезает после максимальная длина достигнута и добавляется многоточие
4. Отбрасывает оставшиеся узлы
5. Сериализует результат на HTML

В нижеприведенном фрагменте приведена полная реализация. Он заканчивается примером, в котором примерная строка
Click <a href="http://stackoverflow.com">this absolutely <b>ah-mah-zing</b> link</a> to access Stackoverflow.
ограничивается 20, 25, 30, 35, 40, 45 и 50 символами соответственно.

Запустите фрагмент кода, чтобы увидеть результаты.

function limit(string, maxLength) { 
 
    let visit = function(node) { 
 
    if (count < maxLength) { 
 
     if (node.nodeType === Node.TEXT_NODE) { 
 
     let left = maxLength - count; 
 
     let length = node.nodeValue.length; 
 

 
     if (length > left) { 
 
      node.nodeValue = node.nodeValue.substring(0, left) + '...'; 
 
      count += left; 
 
     } else { 
 
      count += length; 
 
     } 
 
     } else { 
 
     for (let childNode of Array.from(node.childNodes)) { 
 
      visit(childNode); 
 
     } 
 
     } 
 
    } else { 
 
     node.remove(); 
 
    } 
 

 
    return node; 
 
    }; 
 
    let dom = new DOMParser().parseFromString(string, "text/html"); 
 
    let tree = dom.body; 
 
    let count = 0; 
 

 
    return visit(tree).innerHTML; 
 
} 
 

 
let string = 'Click <a href="http://stackoverflow.com">this absolutely <b>ah-mah-zing</b> link</a> to access Stackoverflow.'; 
 

 
document.getElementById('container').innerHTML = [20, 25, 30, 35, 40, 45, 50] 
 
     .map(maxLength => limit(string, maxLength)) 
 
     .join('<br>');

<div id="container"></div>

Преимущества

• Он сохраняет все соответствующие теги, даже вложенные теги
• Это точная, так как HTML-теги и атрибуты не будут приняты во внимание, чтобы определить, как много символов для отображения.

Недостатки

• Производительность не может быть звездной, хотя есть еще возможности для оптимизации (например, сериализации обратно в HTML может быть пропущен, экземпляр DOMParser могут быть разделены, и т.д.)