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

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 に答える