Question

嘿:)我知道之前曾问过一个类似的问题，但我无法理解。我想创建一个名为makeMeSpaces的方法，所以我的h2文本将在每个字符之间有一个空格..我可能想在其他地方使用它。从逻辑的角度来看，我现在已经有了这个：

var text = "hello";
var betweenChars = ' '; // a space

document.querySelector("h1").innerHTML = (text.split('').join(betweenChars));

它也很好用，但我想我想做

<h2>Hello.makeMeSpaces()</h2>

或类似的东西

谢谢你们！

Answer 1

如果你真的想要一个可重复使用的功能，＆＃39;你必须自己编写：

function addSpaces(text) {
    return text.split('').join(' ');
}

然后，在代码的其他地方，您可以像这样调用它：

var elem = document.querySelector('h2');
elem.innerHTML = addSpaces(elem.innerHTML);

Answer 2

也许这就是你想要的，不是你所展示的，而是一些类似的

＆＃13;

Element.prototype.Spacefy = function() {
  // innerText for IE < 9
  // for others it's just textContent
  var elem = (this.innerText) ? this.innerText : this.textContent,
    // replacing HTML spaces ('&nbsp;') with simple spaces (' ')
    text = elem.replace(/&nbsp;/g, " ");
  // here , space = "&nbsp;" because HTML ASCII spaces are "&nbsp;"
  space = "&nbsp;",
    // The output variable
    output = "";
  for (var i = 0; i < text.length; i++) {
    // first take a character form element text
    output += text[i];
    // then add a space
    output += space;
  };
  // return output
  this.innerHTML = output;
};

function myFunction() {
  var H1 = document.getElementById("H1");
  // calling function
  H1.Spacefy();
};

＆＃13;

<h1 id="H1">
  <!-- The tags inside the h1 will not be taken as text -->
  <div>
Hello
  </div>
</h1>
<br />
<button onclick="myFunction ()">Space-fy</button>

＆＃13;

您也可以多次点击该按钮:)

注意： - 此脚本有一个流程，它不适用于嵌套的DOM结构，请参考chat了解更多

Here is a link to chat if you need to discuss anything

这是由bgran提供的好codepen，效果更好

在每个字符之间添加一个空格，但在方法中

2 个答案: