如何在javascript字符串中的某个字符周围添加空格？

Question

我有一个javascript字符串：

var str = 'param 1 | param 2 | someval 1: param 3 | someval 2: param 4';

我正在网页上显示它。

如何让它看起来像：

param 1     |     param 2     |     someval 1: param 3     |    someval 1: param 3

将 置于其间只打印出 个。{/ p>

Answer 1

看起来你只想添加5个空格，后跟|每个项目之间有5个空格。你可以这么做：

str.split(' | ').join('     |     ')

Answer 2

不确定这是否是您要找的，但使用css可以使用word-spacing属性

div {
  word-spacing: 30px;
}

<div>
  param1 | param2 | param3 | param4
</div>

Answer 3

您没有设置HTML，这就是nbsp失败的原因：

var str = 'param1 | param2 |      param3 | param4';
document.getElementById('a').innerHTML = str;

<div id='a'></div>

Answer 4

您可以使用.replace()在特定地点添加字符。

regular expression定位|。

var str = 'param 1 | param 2 | someval 1: param 3 | someval 2: param 4';

str = str.replace(/\s\|\s/g, "     |      ");

document.getElementById("result").innerHTML = str;

<div id="result"></div>

Answer 5

修改您可以使用展示flex和replace(string,newstring)

以前的记录回答 您可以使用word-spacing或text-align-last，不太确定您的视觉效果。

首先演示，replace()。

var str = 'param 1 | param 2 | someval 1: param 3 | someval 2: param 4';
document.getElementById('mystring').innerHTML = str;
document.getElementById('juststring').innerHTML = str;
// update & what matters
var newstr = str.replace(/[|]/gi, '<b> $& </b>');
document.getElementById('flexystring').innerHTML = newstr;

/* what matters i believe */

#flexystring {
  display: flex;
}

b {
  margin: 0 auto;
  color: red;
}
/* what did not really matter */
#mystring {
  word-spacing: 4em;
}

#juststring {
  text-align-last: justify;
}

code,
strong {
  display: block;
}

p+code {
  background: yellow;
}

strong~p+code {
  background: gray;
  color: lightgray;
}
strong {
color:red;
}
p,
strong {
  margin-top: 2em;
  font-weight: bold;
  text-align: center;
}

<p>flex and margin to justify bits of strings</p>
<code id="flexystring"></code>
<strong>irrelevant previous answer left for records </strong>
<p>increase spacing ?</p>
<code id="mystring"></code>
<p>justify string ?</p>
<code id="juststring"></code>