1

I'm been scratching my head on this one for a while now and am hoping there's a solution out there somewhere..

I have some HTML strings similar to this:

'<a href="link.com">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit. Ut lobortis luctus leo, non porta nisi euismod ut. <a href="anotherlink.com">Nulla tristique</a> scelerisque fringilla.'

I need to use JavaScript to truncate/split the text after a certain number of characters, not counting the HTML in the links, but still rendering the links in the resulting text. So for example, if I'm truncating it at 20 characters then I'd want the following to be displayed, but with the 'Lorem ipsum' text still linked:

Lorem ipsum dolor si

If I just use str.substring(0,20) then the HTML characters in the string are also displayed so I get:

<a href="link.com">L

Which just renders as a hyper-linked L:

L

Does anyone have any suggestions for me? I tried doing a search but couldn't find an appropriate answer.

If it helps I have both the raw non-HTML text and the full HTML text (with links) available that I can use in the JS. I don't want to just use the raw text though as it then won't render any of the links. For example, if I split the text at 200 characters then I'd want all of the links to still be rendered in the HTML, but for only 200 characters of actual on-screen text to be displayed to the user.

Hopefully that makes sense. Many thanks in advance for any help!

John

EDIT: To clarify what I'm trying to accomplish;

I have a post (text string) which has links in it. I want to count the characters of the text excluding the HTML characters in the links. I then want to truncate the text to still include the HTML links, but only show X number of characters to the user.

For example;

'<a href="link.com">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit. Ut lobortis luctus leo, non porta nisi euismod ut. <a href="anotherlink.com">Nulla tristique</a> scelerisque fringilla.'

When truncated to 40 characters would be displayed as:

'<a href="link.com">Lorem ipsum</a> dolor sit amet, consectetur adi'

So it includes the links but only shows 40 characters of text to the user. If I use str.substring(0,40) then it includes the links in the character count and ends up showing:

'<a href="link.com">Lorem ipsum</a> dolo'

Hopefully that makes sense. Apologies for the confusion.

John
  • 102
  • 10
  • 1
    What are you trying to do? Why are you trying to do this? – brso05 Oct 09 '14 at 17:21
  • 1
    Is it possible to truncate the text BEFORE it gets put onto the page? That would be a cleaner way to do this. – forgivenson Oct 09 '14 at 17:21
  • An usual procedure is to create a temporary element, append the string to the newly-created element, use some DOM manipulation methods and convert the manipulated content back to a string if needed. – Teemu Oct 09 '14 at 17:24
  • To explain further, I'm trying to truncate a text string in a social media post so that it only displays the first X number of characters and then contains a 'See more' button at the end which expands the text to reveal it all. I can truncate the text before it gets on the page but I need both the short and full versions of the text available with the links still intact in both versions. – John Oct 09 '14 at 17:29
  • There is a couple of good answers below. And please, don't try to do this with [regexp](http://stackoverflow.com/a/1732454/1169519) ; ). – Teemu Oct 09 '14 at 17:31
  • Haha thanks Teemu I'll be sure to avoid regex. Unfortunately the answers below are similar to what I'm already using (str.substring) and don't preserve the links in the HTML but I'm hoping someone else has another suggestion. – John Oct 09 '14 at 17:41
  • What I'm trying to do is similar to a post on Facebook when it would show the text from the post with links and all and then if the text exceeds a certain length it adds a 'See more' button which allows you to expand the post text to continue reading it. – John Oct 09 '14 at 17:49
  • I've added an Edit to the post above to re-explain. Apologies for the confusion. – John Oct 09 '14 at 18:49
  • You could develope [this snippet](http://jsfiddle.net/eh4n715d/) further. It preserves all links and truncates them to a wanted length. The length of other elements will be relative to their original length after truncating. Adding a trailing ellipse to the truncated texts might make results to look better. – Teemu Oct 09 '14 at 20:29
  • Thanks Teemu, I'll see if I can modify that snippet. Currently it seems to have some issues with the links, as shown in [this version](http://jsfiddle.net/eh4n715d/1/). – John Oct 09 '14 at 23:59

2 Answers2

2

You can use it like this:

var s = '<a href="link.com">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit. Ut lobortis luctus leo, non porta nisi euismod ut. <a href="anotherlink.com">Nulla tristique</a> scelerisque fringilla.'

var div = document.createElement("div");
div.innerHTML = s;
var text = div.textContent || div.innerText;

var substr = text.substring(0, 20);
//=> "Lorem ipsum dolor si"
anubhava
  • 761,203
  • 64
  • 569
  • 643
  • Thanks anubhava, I don't think this will preserve the links in the text though. I edited my post to explain further, but I'm trying to keep the links in the text but just display 20 characters of the text to the user on the screen, with the links still intact when present. – John Oct 09 '14 at 17:31
  • This code is just for displaying non html 20 characters to the use. You always have your original HTML with links to do rest. – anubhava Oct 09 '14 at 17:37
  • I understand, that's not going to work though unfortunately as I need the links to be rendered within the short text too, as the short text may be several hundred characters long. The numbers of characters to truncate is variable and may range from 20 to 500 and so I need the links to still be present. – John Oct 09 '14 at 17:45
  • Your own example is trying to strip the links or I am not understanding it right? – anubhava Oct 09 '14 at 18:20
  • I have been using str.substring(0,20) but it doesn't solve the problem. I need to truncate the text to include the links but not count the characters in the links when counting the characters to truncate. I'll edit my original post to explain again. – John Oct 09 '14 at 18:41
1

If your string structure is consistent as you showed; then, this might work:

1.Split your original string by white space 2.Get the first (shift) or last (pop) of the spitted

var longString = "Lorem ipsum dolor sit amet";

shortString = longString.split(" ").shift(); --> //Lorem

Anh Cao
  • 11
  • 2
  • Thanks Anh, but the string structure isn't consistent and will contain various links and characters. – John Oct 09 '14 at 17:43