Javascript 更换增加几<br> 's 到字符串的开头和结尾

Question

我正在使用 Javascript 在标签中的每个文本字母之间添加<br /> 。 代码如下：

$(this).html($(this).text().replace(/(.{1})/g, "$1<br />"));

它在字符串的开头和结尾添加了几个额外的<br />标签，而不是将Asia变成

A<br />s<br />i<br />a

我最终得到

<br /><br /><br /><br /><br /><br /><br /><br />A<br />s<br />i<br />a<br /><br /><br /><br /><br /><br /><br /><br />

帮助！

编辑：没有前导或尾随空格。 这只是<h1>Asia</h1> 。

Answer 1

尝试修剪你的文本，因为那些可能是空格：

$(this).html(jQuery.trim($(this).text()).replace(/(.{1})/g, "$1<br />"));

Answer 2

而不是使用. 匹配任何字符，如果您在寻找字母，为什么不这样做：

$(this).html($(this).text().replace(/(\w{1})/g, "$1<br />"));

Answer 3

您可能有一堆从.text返回的前导和尾随空格。 您应该在插入<br>标签之前去掉空格：

var $this = $(this);
var t  = $this.text().replace(/^\s*/, '').replace(/\s*$/, '');
$this.html(t.replace(/(.{1})/g, "$1<br />"));

或者一个活生生的例子： http://jsfiddle.net/ambiguous/LAH99/

Answer 4

使用正则表达式很容易使您的代码不清楚，所以我用 String.split() 和 Array.join() 编写了一个版本

var $this = $(this);
var text = $(this).text();
var arr = text.split('');
for( var i = 0; i < arr.length -1; i++ ) {
    arr[ i ] += '<br />';
}
$this.text( arr.join('') );