By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,294 Members | 2,650 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,294 IT Pros & Developers. It's quick & easy.

Truncating long words in a larger block of HTML

P: 14
Hi, everybody -- first post for me, though I land here via Google all the time. This is the first time, though, that I just haven't been able to find anything even remotely resembling a solution to my problem.

I have a large block of HTML. I won't get into unnecessary specifics, but let's just say that it's not possible for me to edit this HTML directly or on the server side. Any changes I make to it has to be on the client side, through JavaScript magic of some sort. What I want to do is grab any words in this block that are over a certain length and truncate them, maybe slap a "..." at the end. I've tried many techniques, but I just haven't been able to do it. Here's the closest I've gotten:

Expand|Select|Wrap|Line Numbers
  1. var sbText = document.getElementById('searchbody').innerHTML;
  2. var sbTextArr = sbText.split(' ');
  4. for (var s=0; s<sbTextArr.length; s++) {
  5.     document.getElementById('searchbody').innerHTML = '';
  6.     var tempText = document.createTextNode(sbTextArr[s] + ' ');
  7.     document.getElementById('searchbody').appendChild(tempText);
  8.     if (sbTextArr[s].length > 30) { sbTextArr[s] = 'chicken'; }
  9. }
I haven't bothered writing the whole thing yet because I haven't been able to get the first part working, nor have I decided exactly what I want to do with the words that are too long. So in the example above, let's just say I want to replace all words longer than 30 characters with the word "chicken."

I know innerHTML is proprietary, but it works and all I'm using it for here is to read the HTML and then zero it out, so I figured it was OK.

Anyway, as you can see, what I'm trying to do here is read the contents of a div called "searchbody," put those contents into a variable, create an array with each word in that variable as an element by splitting the variable at each space, replace each array element greater than 30 characters with the word "chicken," and appending all the resulting elements to the end of the searchbody div. This almost works, but the problem is that the HTML doesn't render as HTML, it renders as text. An image tag won't show up as an image -- it shows up as an image tag.

Does anyone know any way to circumvent this problem? Or, alternatively, an entirely different approach?

Thanks a lot!
Jan 16 '07 #1
Share this Question
Share on Google+
2 Replies

Expert 100+
P: 1,208
Expand|Select|Wrap|Line Numbers
  1. <script>
  2. function test() {
  3. var sbText = document.getElementById("searchbody").innerHTML;
  4. var sbTextArr = sbText.split(' ');
  5. var tempText = "";
  6. for (var s=0; s<sbTextArr.length; s++) {
  7. if (sbTextArr[s].length > 30) { sbTextArr[s] = "chicken"; }
  8. document.getElementById('searchbody').innerHTML = "";
  9. tempText = tempText + " " + sbTextArr[s];
  10. document.getElementById('searchbody').innerHTML = tempText;
  11. }
  12. }
  13. </script>
  14. <input type="button" onclick="test();" value="Test"><br>
  15. <div id="searchbody">
  16. this is a test to check word length thiswordislongerthan30adsfasdfasdf
  17. <br>
  18. so lets see what happens here
  19. </div>
Heres a snippet I threw togethor try it out it.
Let me know if this works for you.
Jan 16 '07 #2

P: 14
It does work! Thanks a million for your help.
Jan 16 '07 #3

Post your reply

Sign in to post your reply or Sign up for a free account.