如何使用javascript jQuery在文本之间添加空格

Question

我只是想在文本之间添加一些空格，比如:

frequency47 = frequency47
power250 = power250
voltage85 = voltage85
CompatibilityCisco = CompatibilityCisco
colorgrey = color 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>

Answer 1

您可以使用replaceAll的正则表达式来实现这一点:

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

例子:

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>

Answer 2

这是你想要做的吗?

<br标记断行，它本身不会在两个单词之间添加空格，而且它不是用来这样做的。你可以使用span元素，例如:

你把你想要在span中分隔的元素包裹起来，并使用CSS添加一些边距或填充。

注意span元素是inline元素，所以默认情况下它们只接受水平边距(左和右)，要从顶部和底部添加边距，你必须将它们的显示设置为inline-block或block，或者在该点仅使用p标签。

#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>

虽然，如果你只是想在这些单词之间有一个常规的空格，我不明白为什么不在你写HTML的时候在这些单词之间添加一个空格。然而，这种方法为您提供了更大的灵活性和权力，可以选择如何间隔这些单词(在本例中)。