0

我需要在单独的跨度中将文本换行。
我找到了一个（几乎）完全符合我需要的答案......

用于包装文本示例的插件

$.fn.wrapLines = function (options) {
    var options = $.extend({
        lineWrap: 'span',
        lineClassPrefix: 'wrapliner wrap_line_',
        wordClassPrefix: 'w_line_',
        index: 0,
        offsetTop: 0,
        offsetLeft: 0
    }, options);
    return this.each(function () {
        options.index = 0;
        options.offset = 0;
        var parentElm = $(this);
        var elmText = $(parentElm).text();
        $(parentElm).html(function (ind, htm) {
            var $repText = '<' + options.lineWrap + '>' + elmText.replace(/\s+/g, ' </' + options.lineWrap + '> <' + options.lineWrap + '>');
            $repText = $repText + '</' + options.lineWrap + '>';
            return $repText;
        });
        $(options.lineWrap, parentElm).each(function () {
            var spanOffset = $(this).offset();
            if (spanOffset.top > options.offsetTop) {
                options.offsetTop = spanOffset.top;
                options.index++;
            }
            $(this).addClass(options.wordClassPrefix + options.index);
        });

        if ($.browser.msie && ($.browser.version == 7 || $.browser.version == 8)) {
            for (var x = 1; x <= options.index; x++) {
                var $spans = $('.' + options.wordClassPrefix + x);
                $spans
                .eq($spans.length - 1)
                .removeClass(options.wordClassPrefix + x)
                .addClass(options.wordClassPrefix + (x + 1))
            }
        }
        for (var x = 1; x <= options.index; x++) {
            $('.' + options.wordClassPrefix + x, parentElm)
            .wrapAll('<' + options.lineWrap + ' class="' + options.lineClassPrefix + x + '" />')
            .append("");
            var innerText = $('.' + options.lineClassPrefix + x, parentElm).text();
            $('.' + options.lineClassPrefix + x, parentElm).html(function () {
                return innerText;
            });
        }
    });
};

然而，我想保留标签。

我尝试更改.textto.html并调整正则表达式，但似乎找不到答案。...我不是正则表达式专家

也许有人可以帮助我。

这是我当前实现的一个小提琴，它只获取文本。

只使用文本 jsFiddle

这是一个保留标签的小提琴，但没有正确包装标签之前的文本

在标签 jsFiddle 之前不换行

这是我发现的另一个例子。它完美地包装了单词，但不换行

换行保留标签jsFiddle的单词

4

1 回答 1

0

所以我终于找到了正确的模式。

工作在 jsFiddle

这是我使用的模式/(<\s*.*?[^>]*>(.*?)<\s*\s*.*?>)|(\s+)/ig 

// returns all spaces or tags with their content
.replace(/(<\s*.*?[^>]*>(.*?)<\s*\s*.*?>)|(\s+)/ig, '$1')

这仍然不是完美的，因为它不允许在子标签内换行，但出于我的特定原因，它可以满足我的需求。

也许有人可以使用它。

仍然期待其他实现。

于 2013-04-12T19:17:03.137 回答