Convert type string to type Text on Javascript

Question

I want to create a searcher on my website, the problem is that when I show the results of my database, some have a very large description and I'm trying to trunc the description in order to make it more visual.

What I want to do is to show a description that should be like this:

blablabla description bla bla bla more description

into this:

blablabla description bla bla bla mo...

The maximum length that I want to show is 340 characters and the code that I was thinking of is this one

...
    var newText = document.createElement("p"); //i create a new element of text
    var newContent = document.createTextNode(projects.description); //i set the text to
        //be the description from the database [the type of this var is Text]
    if(newContent.length > 340) {  //if the description is bigger than 340
         var result=newContent + "";  //i convert the newContent type to string since 
              //substring only works with strings and not Text
         result=result.substring(0, 337)+"...";  //i trunc the description
         newContent=result;  // <-- here i need to assign the result[string] to newContent[Text]
    }
    newText.appendChild(newContent);
...

Hope you can tell me how to convert the string to Text again or another way to trunc the description.

Thanks, Bertran

Looks like you already got a string value in `projects.description` – so modify that to your needs, and create a text node from it _afterwards_. — CBroe, Jul 29 '14 at 13:09
Or use what CSS has to offer: https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow — epascarello, Jul 29 '14 at 13:11
why dont try `if (projects.description.length > 340)` ....? then do whatever you want with the text and finally put it into p element — lowselfesteemsucks, Jul 29 '14 at 13:14

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

Your problem here is that you are passing a reference to a string, rather than a reference to a text node, to the appendChild method of the paragraph element you've created.

var newContent = document.createTextNode(projects.description);

On this line, you create a text node, and place a reference to this text node into the variable newContent.

newContent = result;

On this line, you replace the value of the variable newContent with a reference to a string you've created.

Solutions

You have many options for solutions, but here are two obvious ones.

One solution would be to access the nodeValue property of your text node in order to set its contents:

var newContent = document.createTextNode(projects.description);

if (newContent.nodeValue.length > 340)
    newContent.nodeValue = newContent.nodeValue.substring(0, 337) + '...';

Another option would be to pass the createTextNode parameter the right string the first time. A ternary operator could work well here:

var newContent = document.createTextNode(
        projects.description.length > 340
        ? projects.description.substring(0, 337) + '...'
        : projects.description);

Now, when you append newContent to your paragraph element newText, it will be passing a reference to a text node, and not a string.

newText.appendChild(newContent);

Here is a demonstration.

Note, user @epascarello commented that a CSS rule exists to automatically add ellipses to text without the need for JavaScript. Here is a link to an explanation of the rule. Note that this is a CSS3 rule.

Here is another StackOverflow Q&A that deals with the premise of this question.

Insert ellipsis (…) into HTML tag if content too wide

Convert type string to type Text on Javascript

1 Answers1

Solutions