1

I'm dynamically filling a div with text using javascript. The div is at a fix width of 200px, and the text is automatically formatted to fit in that div. The text itself is in a json, and the json has no carriage return.

I would like to know if it's possible to detect the carriage returns that are automatically generated.

The reason I would like to know that is because I have more than a hundred texts, and if a carriage return is inserted after a 3/2 letter word, I need to insert it before the 3/2 letter word.

So I've looked on the forum, but all I tried didn't seem to work.

test = $("#mydiv").html();
html = test.split(/\r\n|\r|\n/g);
console.log(html.length);

It always returns a length of 1, as if it didn't recognize the carriage returns automatically inserted.

Thanks for any help will be most welcomed !

HowTo
  • 69
  • 1
  • 9
  • Tried to start my question by a brief hello but it doesn't seem to take it... – HowTo Jul 04 '13 at 17:12
  • 1
    [Don't worry.](http://meta.stackexchange.com/questions/2950/should-hi-thanks-taglines-and-salutations-be-removed-from-posts) And I think you mean [carriage return](http://en.wikipedia.org/wiki/Carriage_return). Could you maybe post the result of `console.log(test)`? – Martin Ender Jul 04 '13 at 17:22
  • Yes I did, I'm sorry, my english is approximative haha. Well console.log(test) gives me an array with the whole text as test[0]... ["Née en 1950. Championne... pour son franc-parler."] – HowTo Jul 04 '13 at 17:30
  • I don't see any carriage returns. – Martin Ender Jul 04 '13 at 17:30
  • well there are none...in the text there is no carriage return. I only fill a fixed-width div with a text and the carriage returns are automatically displayed by the browser. That's my main problem – HowTo Jul 04 '13 at 17:34
  • So you mean the browser wraps you content? (like it did in your previous comment after `and the`)? you won't get these line breaks in the `html()` return value (and I don't know of any other way to obtain them). but anyway, you should probably clarify that. – Martin Ender Jul 04 '13 at 17:36
  • Have a look at this question: http://stackoverflow.com/questions/3738490/finding-line-wraps – Martin Ender Jul 04 '13 at 17:38
  • wow, a bit more complicated than I expected, but thank you. Isn't there any simpler way? – HowTo Jul 04 '13 at 17:49
  • What do you mean, a '3/2 letter word'? Do you mean a word of three characters or fewer? – 1983 Jul 04 '13 at 19:21
  • possible duplicate of [detecting line-breaks with jQuery?](http://stackoverflow.com/questions/4671713/detecting-line-breaks-with-jquery) – Ro Yo Mi Jul 05 '13 at 01:28
  • @Denomales If the OP just wants to prevent line breaks after short words when displaying the texts in the browser (please clarify) then this is a different problem since the solution is quite simple. – 1983 Jul 05 '13 at 08:25
  • E.g. `mydiv.innerHTML = mytext.replace(/\b(\w{1,3})\s+/g, '$1 ');`. However I can't tell if this is what the OP is actually asking for. (And the results aren't pretty!) – 1983 Jul 05 '13 at 08:35
  • Well, I do want to prevent line breaks after short words. But the line breaks are not hard-coded in my text string. So replacing line breaks by '$1 ' will not do the trick unfortunately...@Denomales, I'm looking at the question you posted...I will make some tries over the week end. and get back to the forum with my results if they work out for me. It's turning out to be a bit harder than I thought it would be... – HowTo Jul 05 '13 at 21:41
  • Did you try it? I'm not replacing line breaks. – 1983 Jul 05 '13 at 21:56

1 Answers1

1

You can prevent line breaks after short words by replacing any space after those words with a non-breaking space. This displays like a normal space, but doesn't allow the text to be wrapped at this point. E.g.

mydiv.innerHTML = mytext.replace(/\b(\w{1,3})\s+/g, '$1 ');

The {1,3} specifies words of one to three alphanumeric characters in length. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions for details. You way wish to adjust the regular expression for your own requirements.

I don't think the effect is especially visually pleasing. Browsers don't have very sophisticated word-wrapping algorithms.

1983
  • 5,882
  • 2
  • 27
  • 39
  • You should also edit your question, especially the title, to make it clearer what you are trying to do. – 1983 Jul 05 '13 at 22:03