0

The title says it all, how is it possible to convert all the spaces to non-breaking spaces, following every number of the html, using Javascript?

[edit] I've tried that (source):

Prevent line-breaks after numbers
  this.preventBreaks = function(){
   /* */
   var id = $('.container');
   /* edit pattern here */
   /* */
   var obj = document.getElementById(id);
   if(obj){
    var html = obj.innerHTML;
    var nhtml = html.replace(pattern,function(r){return ""+r+""})
    obj.innerHTML = nhtml;
   };
  };

And a lot of other things messing with .replace(/(\d+)/g. But Javascript is a mystery for me yet.

DimNC
  • 130
  • 10

3 Answers3

1

The   is tricky, the easiest thing to do is copy and paste it from a site like this one. Details are commented in Snippet.

SNIPPET 1

/* capture: ( any number: \d) that has a
|| whitespace: \s following it.
|| global: g, allows the search to continue 
|| after the first target is found.
|| unicode: u, will accept unicode in 
|| various ways, this snippet is using
|| copy and paste of  
*/
var rgx = /(\d)\s/gu;
/* Using string literal by using the backtick: `
|| instead of quotes. This allows us to use
|| multi-line strings
*/
var str = `abcd 
efghi 123 456
789  10a11 b12c 01`;
/* .replace the regex matches with the original
|| content: $1 followed by a  (or \u00a0)
|| Although it's invisible the space following
|| $1 is  . evident in results
*/
var res = str.replace(rgx, '$1 ');
/* Note the string has less breaks only one 
|| remains since it is after a letter
*/
console.log(res);

SNIPPET 2

// Get the innerHTML of parent element
var main = document.querySelector('main').innerHTML;


// Convert it into a string
var str = main.toString();


var rgx = /(\d)\s/gu;

var res = str.replace(rgx, '$1 ');

console.log(res);

var M = document.querySelector('main');

M.insertAdjacentHTML('afterbegin', res);
<main>
  <p>the number pi 3.14
  goes on forever, because its running from chuck norris. </p>

  <p>The leading causes of death in the United States are: 1 Heart Disease 2
  Chuck Norris 3
  Cancer. Chuck Norris drives an ice cream truck covered in human skulls, Chuck Norris is so fast, he can run around the world and punch himself in the back of the head. Crop circles are Chuck Norris' way of telling the world that sometimes corn needs to lie down Crop circles are Chuck Norris' way of telling the world that sometimes corn needs to lie down, If you spell Chuck Norris in Scrabble, you win. Forever, Chuck Norris told his iPhone 2g it was a iPhone 4
  He can now multi task and use face time, Chuck Norris counted to infinity - 2
    times, Chuck Norris is the only man to ever defeat a brick wall in a game of tennis. Chuck Norris invented Kentucky Fried Chicken's famous secret recipe, with 11
    herbs and spices. But nobody ever mentions the 1 
    of 12
    ingredients: Fear. Chuck Norris doesn't wear a watch. HE decides what time it is Chuck Norris uses pepper spray to spice up his steaks. </p>

  <p>Chuck Norris drives an ice cream truck covered in human skulls. Chuck Norris drives an ice cream truck covered in human skulls When the Boogeyman goes to sleep every night, he checks his closet for Chuck Norris. The chief export of Chuck Norris is Pain There is no theory of evolution. Just a list of animals Chuck Norris allows to live, Chuck Norris doesn't wear a watch. HE decides what time it is, Chuck Norris can slam a revolving door. </p>

  <p>Chuck Norris drives an ice cream truck covered in human skulls, Chuck Norris doesn't wear a watch. HE decides what time it is. Chuck Norris is 10
  feet tall, weighs two-tons, breathes fire, and could eat a hammer and take a shotgun blast standing. Chuck Norris doesn't churn butter. He roundhouse kicks the cows and the butter comes straight out, Fool me once, shame on you. Fool Chuck Norris 1
  time and he will roundhouse you in the face Chuck Norris is my Homeboy, Chuck Norris doesn't wear a watch. HE decides what time it is, Chuck Norris doesn't wash his clothes, he disembowels them, Chuck Norris 1
  time roundhouse kicked someone so hard that his foot broke the speed of light, went back in time, and killed Amelia Earhart while she was flying
    over the Pacific Ocean Fool me 1
    time, shame on you. Fool Chuck Norris once and he will roundhouse you in the face. Fool me 1
    time, shame on you. Fool Chuck Norris 1
    time and he will roundhouse you in the face. Chuck Norris is so fast, he can run
    around the world and punch himself in the back of the head. </p>
</main>

var main = document.querySelector('main');

main.normalize();

/* If we want the whole page to be normalized:
|| document.normalize();
*/
<main>
<p>the number pi 3.14
      goes on forever, because its running from chuck norris. </p>

      <p>The leading causes of death in the United States are: 1 Heart Disease 2
      Chuck Norris 3
      Cancer. Chuck Norris drives an ice cream truck covered in human skulls, Chuck Norris is so fast, he can run around the world and punch himself in the back of the head. Crop circles are Chuck Norris' way of telling the world that sometimes corn needs to lie down Crop circles are Chuck Norris' way of telling the world that sometimes corn needs to lie down, If you spell Chuck Norris in Scrabble, you win. Forever, Chuck Norris told his iPhone 2g it was a iPhone 4
      He can now multi task and use face time, Chuck Norris counted to infinity - 2
        times, Chuck Norris is the only man to ever defeat a brick wall in a game of tennis. Chuck Norris invented Kentucky Fried Chicken's famous secret recipe, with 11
        herbs and spices. But nobody ever mentions the 1 
        of 12
        ingredients: Fear. Chuck Norris doesn't wear a watch. HE decides what time it is Chuck Norris uses pepper spray to spice up his steaks. </p>

      <p>Chuck Norris drives an ice cream truck covered in human skulls. Chuck Norris drives an ice cream truck covered in human skulls When the Boogeyman goes to sleep every night, he checks his closet for Chuck Norris. The chief export of Chuck Norris is Pain There is no theory of evolution. Just a list of animals Chuck Norris allows to live, Chuck Norris doesn't wear a watch. HE decides what time it is, Chuck Norris can slam a revolving door. </p>

      <p>Chuck Norris drives an ice cream truck covered in human skulls, Chuck Norris doesn't wear a watch. HE decides what time it is. Chuck Norris is 10
      feet tall, weighs two-tons, breathes fire, and could eat a hammer and take a shotgun blast standing. Chuck Norris doesn't churn butter. He roundhouse kicks the cows and the butter comes straight out, Fool me once, shame on you. Fool Chuck Norris 1
      time and he will roundhouse you in the face Chuck Norris is my Homeboy, Chuck Norris doesn't wear a watch. HE decides what time it is, Chuck Norris doesn't wash his clothes, he disembowels them, Chuck Norris 1
      time roundhouse kicked someone so hard that his foot broke the speed of light, went back in time, and killed Amelia Earhart while she was flying
        over the Pacific Ocean Fool me 1
        time, shame on you. Fool Chuck Norris once and he will roundhouse you in the face. Fool me 1
        time, shame on you. Fool Chuck Norris 1
        time and he will roundhouse you in the face. Chuck Norris is so fast, he can run
        around the world and punch himself in the back of the head. </p>
    </main>

SNIPPET 3

zer00ne
  • 41,936
  • 6
  • 41
  • 68
  • Thanks zer00ne, this snippet is great. But how could I apply it to all numbers in my .html paragraphs? – DimNC Mar 24 '17 at 20:51
  • It's regex with the `global` `/g` flag, so it'll rip through the whole page. Standby, I'll demonstrate. – zer00ne Mar 24 '17 at 20:55
  • @DimNC see Snippet 2 – zer00ne Mar 24 '17 at 21:24
  • Well, that's something. I've made one change: `var res = str.replace(rgx, '$1\xa0');` Because the IDE I use (Atom) doesn't seem to copy non-breaking spaces correctly. Now, the $10 million question is: **how do I transform the actual html with what is in the res variable?** I might seem a bit annoying, but hundred of french webdev would cheer you for that… non-breaking spaces are a real pain in our language. – DimNC Mar 25 '17 at 18:22
  • @DimNC There might be an easier way to handle whitespace. By normalizing textNodes, you are effectively removing individual whitespaces thereby enforcing a behavior of text wrapping instead of hard breaks. – zer00ne Mar 25 '17 at 18:43
  • @DimNC Updated Snippet 2 with 2 lines: `var M = document.querySelector('main');` `M.insertAdjacentHTML('afterbegin', res);` – zer00ne Mar 25 '17 at 18:57
  • @DimNC See Snippet 3 for an example of the method `.normalize()` – zer00ne Mar 25 '17 at 19:02
  • Snippet 2 is crashing my browser: it keeps repeating the body. I tried to replace `M.insertAdjacentHTML('afterbegin', res);` with `document.body.innerHTML = document.body.innerHTML.replace(rgx, '$1\xa0');` But there's a problem, as mentioned by @Tymo, that way doesn't suit me because it'll also replace the numbers in html tags: `

    ` `

    `…

     – DimNC Mar 25 '17 at 21:31
  • Well, I went to check on textNodes as you suggested, and I found an answer that suits me well: `var tree = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT); while (tree.nextNode()) { var textNode = tree.currentNode; textNode.nodeValue = textNode.nodeValue.replace(/(\d)\s/gu, '$1\xa0'); }` It looks stable and doesn't mess with my html tags, so I think I'll stick with it. Thanks a lot for your patience and sharing your knowledge @zer00ne, you've taught me things! I truly appreciate. Cheers! :) – DimNC Mar 25 '17 at 22:03
  • That's great, Tree Walker is one of my favorite methods, but I haven't found a need to develop it at work yet, so I haven't had the opportunity to use it at it's full potential. Happy coding. – zer00ne Mar 25 '17 at 22:29
0

Should be a simple replace with a regular expression:

var input = '10 USD';

var output = input.replace(/(\d) /g, '$1&nbsp;');

console.log(output); // "10&nbsp;USD"
TimoStaudinger
  • 41,396
  • 16
  • 88
  • 94
  • Thanks for `.replace(/(\d) /g, '$1 ');`, but how do you select all the numbers of the html? – DimNC Mar 24 '17 at 20:01
  • You likely don't want to select all numbers, as this will cause issues e.g. with `

    `. What exactly do you want to achieve?

     – TimoStaudinger Mar 24 '17 at 20:04
  • Actually, I do want to select all numbers. I have a text with several numbers followed by words (e.g. "3 millions", or "100 people"). But in french (maybe in other languages too idk), it's recommended not to have numbers at the end of lines while the word it numbers is on the next line. I'm designing the web site, the content is based on a word doc. handled by someone else. And I don't want to add   to all numbers every time the all the text changes. – DimNC Mar 24 '17 at 20:46
0

One solution is: 

var tree = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);

 while (tree.nextNode()) {
     var textNode = tree.currentNode;
     textNode.nodeValue = textNode.nodeValue.replace(/(\d)\s/gu, '$1\xa0');
 }

<h1>Lorem 4 ipsum, lorem 5 ipsum…</h1>
<p>That text will not let any number alone at the end of the lines. I've got 99 problems but non-breaking spaces after numbers aren't one anymore! I've got 99 problems but non-breaking spaces after numbers aren't one anymore! I've got 99 problems but non-breaking spaces after numbers aren't one anymore!</p>

(Will probably not work with IE7).

→ All credits go to @zer00ne for the inputs and the regex, and @c.P.u1 (source)!

Community
  • 1
  • 1
DimNC
  • 130
  • 10