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.

Improve this question
10
  • 1
    What are you trying to do? Why are you trying to do this? Commented Oct 9, 2014 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. Commented Oct 9, 2014 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. Commented Oct 9, 2014 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. Commented Oct 9, 2014 at 17:29
  • There is a couple of good answers below. And please, don't try to do this with regexp ; ). Commented Oct 9, 2014 at 17:31

2 Answers 2

Reset to default
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"
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

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.
This code is just for displaying non html 20 characters to the use. You always have your original HTML with links to do rest.
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.
Your own example is trying to strip the links or I am not understanding it right?
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.
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

Improve this answer

1 Comment

Thanks Anh, but the string structure isn't consistent and will contain various links and characters.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.