Is there a way to display only the first x characters of an HTML code while disregarding any tags present within

Question

Is there a way to display only the first x characters of an HTML code while disregarding any tags present within

When I work with a text editor, it generates HTML code that I save in the database. On another page, I need to display only the first 100 characters of the text without counting the HTML tags.

For instance, let's say this is the HTML code saved in the database:

<p><span style="color:red; font-size:20px; font-family:Arial">
Here is the real text that I want to strip to 100 characters</span></p>
<p>Can be splited <b>between</b> multiple divs. 
Here is some more text to be longer <p>

If I try to use substring in JavaScript, it would end up breaking the HTML code like so:

<p><span style="color:red; font-size:20px; font-family:Arial">
Here is the real text that I want to s

But what I actually want is to achieve this result:

<p><span style="color:red; font-size:20px; font-family:Arial">
Here is the real text that I want to strip to 100 characters</span></p>
<p>Can be splited <b>between</b> multiple divs. 
H<p>

This project is developed using Angular 4, so any suggestions involving JS, Angular, CSS, HTML, or leveraging Node.js on the backend would be greatly appreciated.

javascript html css angular

Answer 1

Answer №1

When working on the frontend, you have the ability to achieve something similar to this:

var div=document.createElement("div");
div.innerHTML='<p><span style="color:red; font-size:20px; font-family:Arial">Here is the real text that I want to strip to 100 characters</span></p><p>Can be splited <b>between</b> multiple divs. Here is some more text to be longer <p>';
var excerpt=div.innerText.substring(0,100);
console.log(excerpt)

The variable excerpt will contain the first 100 characters.

Edit if you want to retain the HTML tags, you can utilize the following method:

var count = 0;

function strip(el, max) {
  var children = Array.prototype.slice.call(el.childNodes);
  children.forEach((node) => {
    if (node instanceof Text) {
      var newCount = count + node.textContent.length;
      var diff = newCount - max;
      if (diff > 0)
        node.textContent = node.textContent.substring(0, node.textContent.length - diff);
      count += node.textContent.length;
    } else if (node instanceof HTMLElement) {
      if (count >= max)
        node.remove(); // remove unnecessary tags
      else
        strip(node, max); // do recursively
    }
  })
}

var div = document.createElement("div");
div.innerHTML = '<p><span style="color:red; font-size:20px; font-family:Arial">Here is the real text that I want to strip to 100 characters</span></p><p>Can be splited <b>between</b> multiple divs. Here is some more text to be longer <p>'
var clone = div.cloneNode(true)
strip(clone, 100)
document.write("<h2>Original</h2>");
document.write(div.innerHTML);
document.write("<h2>Stripped</h2>");
document.write(clone.innerHTML);

It's important to note that the strip function will alter an existing HTMLElement, hence why it was cloned in this example.

If you wish to implement this server-side, a DOM parser for Node.js can be utilized with a similar approach.

Answer 2

When working on the frontend, you have the ability to achieve something similar to this:

var div=document.createElement("div");
div.innerHTML='<p><span style="color:red; font-size:20px; font-family:Arial">Here is the real text that I want to strip to 100 characters</span></p><p>Can be splited <b>between</b> multiple divs. Here is some more text to be longer <p>';
var excerpt=div.innerText.substring(0,100);
console.log(excerpt)

The variable excerpt will contain the first 100 characters.

Edit if you want to retain the HTML tags, you can utilize the following method:

var count = 0;

function strip(el, max) {
  var children = Array.prototype.slice.call(el.childNodes);
  children.forEach((node) => {
    if (node instanceof Text) {
      var newCount = count + node.textContent.length;
      var diff = newCount - max;
      if (diff > 0)
        node.textContent = node.textContent.substring(0, node.textContent.length - diff);
      count += node.textContent.length;
    } else if (node instanceof HTMLElement) {
      if (count >= max)
        node.remove(); // remove unnecessary tags
      else
        strip(node, max); // do recursively
    }
  })
}

var div = document.createElement("div");
div.innerHTML = '<p><span style="color:red; font-size:20px; font-family:Arial">Here is the real text that I want to strip to 100 characters</span></p><p>Can be splited <b>between</b> multiple divs. Here is some more text to be longer <p>'
var clone = div.cloneNode(true)
strip(clone, 100)
document.write("<h2>Original</h2>");
document.write(div.innerHTML);
document.write("<h2>Stripped</h2>");
document.write(clone.innerHTML);

It's important to note that the strip function will alter an existing HTMLElement, hence why it was cloned in this example.

If you wish to implement this server-side, a DOM parser for Node.js can be utilized with a similar approach.

Answer 3

Answer №2

If you're working with node.js, there is a useful package called htmlToText

var htmlToText = require('html-to-text');
var htmlText = '<p><span style="color:red; font-size:20px; font-
   family:Arial">Here is the real text that I want to strip to 100 characters</span></p>
   <p>Can be splited <b>between</b> multiple divs. 
   Here is some more text to be longer <p>';

var text_100firstNonHtml  = htmlToText.fromString(htmlText, {
    wordwrap: 130
}).substring(0,100);

console.log(text_100firstNonHtml);

Answer 4

If you're working with node.js, there is a useful package called htmlToText

var htmlToText = require('html-to-text');
var htmlText = '<p><span style="color:red; font-size:20px; font-
   family:Arial">Here is the real text that I want to strip to 100 characters</span></p>
   <p>Can be splited <b>between</b> multiple divs. 
   Here is some more text to be longer <p>';

var text_100firstNonHtml  = htmlToText.fromString(htmlText, {
    wordwrap: 130
}).substring(0,100);

console.log(text_100firstNonHtml);

Answer 5

Answer №3

Your backend is nodejs, so a convenient solution would be to remove all html tags on the server side and only send the text with a specified length to the client. You can utilize the "striptags" npm package for node. Check it out here: https://www.npmjs.com/package/striptags

Alternatively, using jQuery makes it simple (whether on the server or client side), but you have the freedom to choose any html parser/framework.

var htmlStr = '<p><span style="color:red; font-size:20px; font-family:Arial">Here is the real text that I want to strip to 100 characters aaaaa bbbbbb cccccc ddddd eeeeee ffff ggggg hhhh iiii jjjj kkk llllll mmmm nnnn</span></p><p>Can be splited <b>between</b> multiple divs. Here is some more text to be longer <p>';
var $html = $(htmlStr);

$html.find('*').each(function(idx, tag) {
  var shortText = $(tag).text().substring(0,100);
  $(tag).text(shortText);
});

console.log($html.html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 6

Your backend is nodejs, so a convenient solution would be to remove all html tags on the server side and only send the text with a specified length to the client. You can utilize the "striptags" npm package for node. Check it out here: https://www.npmjs.com/package/striptags

Alternatively, using jQuery makes it simple (whether on the server or client side), but you have the freedom to choose any html parser/framework.

var htmlStr = '<p><span style="color:red; font-size:20px; font-family:Arial">Here is the real text that I want to strip to 100 characters aaaaa bbbbbb cccccc ddddd eeeeee ffff ggggg hhhh iiii jjjj kkk llllll mmmm nnnn</span></p><p>Can be splited <b>between</b> multiple divs. Here is some more text to be longer <p>';
var $html = $(htmlStr);

$html.find('*').each(function(idx, tag) {
  var shortText = $(tag).text().substring(0,100);
  $(tag).text(shortText);
});

console.log($html.html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 7

Answer №4

Go through each child element's text content, identify the x-character position, and insert a special string (like '@@' in this example) to separate the text at that point (I set a limit of 70 characters for testing purposes):

var counter = 0;
var children = document.getElementById("test").children;
for (var i = 0; i < children.length; i++) {
  var node = children[i];
  var inText = node.textContent;
  if (counter + inText.length > 70) {
    var index = 70 - counter;
    node.textContent = inText.slice(0, index) + "@@" + inText.slice(index);
    break;
  } else {
    counter += inText.length;
  }
}
var index = document.getElementById("test").innerHTML.indexOf("@@");
var output = document.getElementById("test").innerHTML.substring(0,index);
alert(output);

<div id="test">
  <p><span style="color:red; font-size:20px; font-family:Arial">Here is the actual text that needs to be trimmed to 70 characters</span></p>
  <p>Can be split <b>across</b> multiple divs.H
    <p>
</div>

(you can also choose to remove the @@ marker afterwards)

Answer 8

Go through each child element's text content, identify the x-character position, and insert a special string (like '@@' in this example) to separate the text at that point (I set a limit of 70 characters for testing purposes):

var counter = 0;
var children = document.getElementById("test").children;
for (var i = 0; i < children.length; i++) {
  var node = children[i];
  var inText = node.textContent;
  if (counter + inText.length > 70) {
    var index = 70 - counter;
    node.textContent = inText.slice(0, index) + "@@" + inText.slice(index);
    break;
  } else {
    counter += inText.length;
  }
}
var index = document.getElementById("test").innerHTML.indexOf("@@");
var output = document.getElementById("test").innerHTML.substring(0,index);
alert(output);

<div id="test">
  <p><span style="color:red; font-size:20px; font-family:Arial">Here is the actual text that needs to be trimmed to 70 characters</span></p>
  <p>Can be split <b>across</b> multiple divs.H
    <p>
</div>

(you can also choose to remove the @@ marker afterwards)

Answer 9

Answer №5

When incorporating API response into an HTML file, a helpful approach is to utilize the following code:

This will effectively showcase only the initial 100 characters of your string.

Answer 10

When incorporating API response into an HTML file, a helpful approach is to utilize the following code:

This will effectively showcase only the initial 100 characters of your string.

Is there a way to display only the first x characters of an HTML code while disregarding any tags present within

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

The 600 pixel wide page is not completely filling the 640 pixel width screen on a mobile device

Is there a way to execute JavaScript code before any other scripts on the page? I need to perform a session check in JavaScript that redirects to a different page

Navigating through Angular Material table elements

What is the best way to efficiently transmit Objects through AJAX utilizing bodyParser in node.js express?

IE does not encode single quotes/apostrophes in URLs

Navigating to a specific page based on the selected option is the key to efficient web browsing

Attempting to embed an image within the datepicker input

Arrange three div elements beside each other with the middle column containing two

PHP - session expires upon page refresh

Affixing a navigation bar to the top while scrolling

Enhance the appearance of your forms with the "Bootstrap

Creating a JSON structure using an array in Typescript

An easy way to ensure IE opens PDF links in an iframe in a new tab

Enhancements in Converting JSON Objects to HTML Lists Using jQuery

Achieve a stunning visual effect by placing images behind the background using HTML and

How can I prevent the jQuery animation from moving elements by adjusting the border?

"Upon setting the state in React, the Full Calendar refreshes and retrieves events

Menu options displayed with the help of HTML5 tags

Tips for incorporating a return statement within a network request function that is already returning information pertaining to the request

What is the best approach for managing validations on a field-by-field basis within a Formik FieldArray?