How to add space between text using javascript jQuery [closed]-CodePudding

I just want to add space between text like:

frequency47 = frequency 47
power250 = power 250
voltage85 = voltage 85
CompatibilityCisco = Compatibility Cisco
colourGrey = colour Grey
typePower = type Power

<div id="tab-content">
  <p>
    AC input frequency47 – 63 Hz <br> 
    Total power250 W <br> 
    AC input voltage85 – 264 V <br> 
    Other features <br> 
    CompatibilityCisco ASR 1001-X <br>
    Design <br> 
    Product colourGrey <br> 
    Features <br>
    Product typePower supply <br>
  </p>
</div>

CodePudding user response：

You can use a regular expression with replaceAll to achieve this:

line.replaceAll(/([a-z])([A-Z0-9])/g, '$1 $2')

Examples:

console.log('aG a7'.replaceAll(/([a-z])([A-Z0-9])/g, '$1 $2'));

const text = document.querySelector('#tab-content p');

text.innerHTML = text.innerHTML.replaceAll(/([a-z])([A-Z0-9])/g, '$1 $2');

<div id="tab-content">
  <p>
    AC input frequency47 – 63 Hz <br> 
    Total power250 W <br> 
    AC input voltage85 – 264 V <br> 
    Other features <br> 
    CompatibilityCisco ASR 1001-X <br>
    Design <br> 
    Product colourGrey <br> 
    Features <br>
    Product typePower supply <br>
  </p>
</div>

CodePudding user response：

Is this what you want to do?

<br tag breaks the line, it doesn't add space between two words per se, and it's not meant for that. To do What you want, you can use span element, for example.

You wrap the elements you want to space out within a span and using CSS you add some margin, or padding.

Notice that span elements are inline elements so by default they only accept margin horizontally (left and right), to add margin to them from top and bottom, you have to make their display to be inline-block or block or just use p tag at that point.

#tab-content span {
  margin-left: 5px;
}

<div id="tab-content">
  <p>
    AC input frequency<span>47</span> – 63 Hz<br>
    Total power<span>250 W</span><br>
    AC input voltage<span>85</span> – 264 V <br> 
    Other features <br> 
    Compatibility<span>Cisco ASR<span>1001-X</span> <br>
    Design <br> 
    Product colour<span>Grey</span> <br> 
    Features <br>
    Product type<span>Power</span> supply <br>
  </p>
</div>

Although, if you just want a single regular space between those words I don't understand why not just add a space between those words when you are writing the HTML. However, this approach gives you much more flexibility and power over how you space those words (in this example).