Angular JS condensed text

Question

Angular JS condensed text

Is it possible to implement AngularJS in order to extract a substring from a string and add an ellipsis at the end, while also being able to ignore anchor tags within the substring?

Let's consider the following example text:

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.

I want to display only the first 70 characters of the text followed by an ellipsis.

In some cases, there might be an anchor link within the portion of the text that needs to be substringed. If we simply cut off the text at 70 characters, it can result in a broken anchor link.

Currently, I am using the following HTML setup:

> data-ng-bind-html

to handle the substringing process.

Instead of relying on CSS with its limitations related to variable content length, I have implemented a custom filter called 'customEllipsis' which properly truncates the text without breaking any anchor tags:

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

javascript angularjs

Answer 1

Answer №1

Utilize the Angular sanitizer for HTML parsing. Take a look at this jsbin example to see it in action.

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 2

Utilize the Angular sanitizer for HTML parsing. Take a look at this jsbin example to see it in action.

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

Answer №2

An effective way to manipulate data in Angular is by implementing the built-in filter called limitTo

Answer 4

An effective way to manipulate data in Angular is by implementing the built-in filter called limitTo

Answer 5

Answer №3

This unique solution tackles the problem in a systematic way:

Firstly, it converts the HTML content to a DOM document
A depth-first traversal of the document is then carried out
All text nodes are evaluated, truncated after reaching the maximum length, and an ellipsis is added
Any remaining nodes that exceed the limit are discarded
Finally, the result is serialized back to HTML format

The code snippet provided below includes the full implementation. An example demonstrates how a given string

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

is limited to 20, 25, 30, 35, 40, 45, and 50 characters respectively.

Execute the code snippet to observe the outcomes.

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>

Upsides

All relevant tags, even nested ones, are preserved perfectly
Precision is ensured as HTML tags and attributes do not influence character display limit

Downsides

Performance may not be optimal, although potential optimizations exist (e.g., skipping serialization back to HTML, sharing the DOMParser instance, etc.)

Answer 6

This unique solution tackles the problem in a systematic way:

Firstly, it converts the HTML content to a DOM document
A depth-first traversal of the document is then carried out
All text nodes are evaluated, truncated after reaching the maximum length, and an ellipsis is added
Any remaining nodes that exceed the limit are discarded
Finally, the result is serialized back to HTML format

The code snippet provided below includes the full implementation. An example demonstrates how a given string

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

is limited to 20, 25, 30, 35, 40, 45, and 50 characters respectively.

Execute the code snippet to observe the outcomes.

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>

Upsides

All relevant tags, even nested ones, are preserved perfectly
Precision is ensured as HTML tags and attributes do not influence character display limit

Downsides

Performance may not be optimal, although potential optimizations exist (e.g., skipping serialization back to HTML, sharing the DOMParser instance, etc.)

Angular JS condensed text

Answer №1

Answer №2

Answer №3

Similar questions

Tips for addressing lag problems in my Three.js game as time progresses

Developing a 3D spherical material for WebGL rendering in Three.js

Prevent submission of angularjs form when image exceeds size limit

Executing a Ruby function via AJAX

Convert Number to Decimal Format with Additional Four Decimal Places

Vuejs v-for nested loops

Utilizing correct Django CSRF validation when making a fetch post request

Generate an array of HTML files from external sources and randomize their placement within multiple div containers

A guide on how to apply filtering to an array in Vue using another array

The standalone page loads smoothly, but it gets stuck when it is placed in an iframe

Utilize HTTPS and HTTP with Express framework in node.js

I am struggling with grasping the concept of the event system

Trigger the Modal once the navigation step is completed

Make sure to update the package.json file at multiple locations following the execution of the "npm i" command

What is the process for styling the <HTML> element effectively?

Incorporating ZeroClipboard or ZClip (button for copying to clipboard) using JQuery's Ajax functionality

accordions that are supposed to adapt to different screen sizes are

Error in Redux app: Attempting to access the 'filter' property of an undefined value

Facing issues with debugging JavaScript using WebStorm lately

Continue running web AJAX request in Android browser while it is minimized