生成一串＆＃34; |＆＃34;宽度与跨度中另一个字符串的大小相同

Question

我在latin ltr中有几个带字符串的跨度，我想在rtl中使用占位符字符串克隆这些字符串，例如＆＃34; |＆＃34; ..＆＃34; ||||||＆ ＃34; ...

示例：

<span>Lorem impus dolor sit amen</span>

我想生成另一个内部宽度与上一个跨度相同的跨度，最终跨度应该像这样一个

<span>||||||||||||||||||||||||||</span>

我正在使用这个jQuery代码，但我无法为大多数字符串获得相同的大小

$('elem').find('span').each(function() {

    var char_width = function(char, elem) {
        var span = $('<span />').html(char);
        $(elem).append(span);
        var width = span.width();
        span.remove();
        return width;
    };

    var char_length = char_width('¦', this);
    var original_width = char_width($(this).text(), this);
    var nbchars = Math.floor(original_width / char_length);
    var chars = Array(nbchars).join('¦');
    while (char_width(chars, this) > original_width) chars = chars.slice(0, -1);
    var diff = original_width - char_width(chars, this);
    $(this).html(chars).css('padding-left', diff);

});

而且，这个脚本花了超过2000毫秒来完成执行。

提前致谢。

编辑：已解决 关键是不替换空格，这里是代码

var placeholder = $(this).text().split(/\s+/);
for (var a in placeholder) placeholder[a] = new Array(placeholder[a].length + 1).join('_');
placeholder = placeholder.join(' ');

Answer 1

使用等宽字体并执行以下操作：

new Array( someString.length + 1 ).join('|');

这是我提出的一个小型演示：http://jsbin.com/jewurewo/2/edit

Answer 2

尝试在具有不可见文本的元素上使用重复的背景图像：

<span style="color: transparent; background-image: url('pipe.png')">Lorem impus dolor sit amen</span>

Answer 3

好吧，我只是循环遍历所有span元素，并为每个元素创建了一个新的空span并添加了条形，直到它的宽度大于或等于原始span宽度：

该代码适用于任何字体：

Sans-Serif Test

Monospace Test

主循环：

while(newSpan.width() < elem.width())
    newSpan.append('|');

代码被评论，玩得开心！