用jQuery检测换行符?

2021/01/21 17:51 · jquery ·  · 0评论

是否有可能让jQuery / javascript检测字符串在何处损坏(以便适合CSS宽度限制),以便在新行的开头之前插入DOM元素?

我想出了一种方法,但是出于您的目的,它可能会过大,因此请考虑到这一点。

您需要创建该元素的副本,清空原始元素,然后将每个单词移回原始元素。如果高度在任何时候都发生变化,则该单词之前会有换行符。使用会很简单$(el).text(),但是如果里面可以有其他标签(而不仅仅是文本),它将变得更加复杂。我试图解释如何在此答案框中按节点将其分解,但是发现仅在jsFiddle中创建jQuery插件会更容易。链接在这里:http : //jsfiddle.net/nathan/qkmse/Gist)。

它不能很好地处理浮动元素,并且在其他一些情况下它会崩溃。让我知道您是否需要更多选项,或者它是否不能满足您的目的,或者您不确定如何应用它,我将尽力提供帮助。

这是一种方法。注意:如果不使用等宽字体,我看不到理想的解决方案。与字符相等使此任务容易得多。

  1. 等宽字符
  2. 计算一个字符的大小
  3. 计算容器的大小
  4. 每行查找字符
  5. 查找行将中断的位置(即空格,破折号等)
  6. 获取所有中断索引。

看看相关HTML的jsfiddle。我尚未完成此功能。在计算断裂指数时,需要进行更多检查。现在,它正在使用lastIndexOf(''),但这忽略了下一个索引可能是空格或当前索引。另外,我不考虑其他换行符。但是,这应该是一个很好的起点。

var text = $('#text').text(),                   // "lorem ipsum ... "
    len = text.length,                          // total chars
    width = $('#text').width(),                 // container width
    span = $('<span />').append('a').appendTo('#sandbox'),
    charWidth = span.width(),                  // add single character to span and test width
    charsPerRow = Math.floor(width/charWidth); // total characters that can fit in one row

var breakingIndexes = [], // will contain indexes of all soft-breaks
    gRowStart = 0,        // global row start index
    gRowEnd = charsPerRow;// global row end index

while(gRowEnd < len){
    var rowEnd = text.substring(gRowStart, gRowEnd).lastIndexOf(' '); // add more checks for break conditions here
    breakingIndexes.push(gRowStart + rowEnd); // add breaking index to array
    gRowStart = gRowStart + rowEnd + 1; // next start is the next char
    gRowEnd = gRowStart + charsPerRow;  // global end inxex is start + charsperrow
}

var text2 = $('#text2').text();           // "lorem ipsum ... " now not width bound
var start = 0, newText = '';
for(var i=0; i < breakingIndexes.length; i++){
    newText += text2.substring(start, breakingIndexes[i]) + '<br />'; // add hard breaks
    start = breakingIndexes[i]; // update start
}

$('#text2').html(newText); // output with breaks

http://jsfiddle.net/Y5Ftn/1/

这是我的脚本,需要文本,然后使每行成为一个跨度

CSS:

    margin: 0;
        padding: 0;
    }

    .title{
        width: 300px;
        background-color: rgba(233,233,233,0.5);
        line-height: 20px;
    }

    span{
        color: white;
        background-color: red;
        display: inline-block;
        font-size: 30px;
    }

    a{
        text-decoration: none;
        color: black;
    }

html

<div class="title">
        <a href="">SOME TEXT LONG TEXT ANDTHISISLONG AND THIS OTHER TEXT</a>
    </div>

JS

$(function(){

        $(".title").find("a").each(function(){

            var $this = $(this);
            var originalText = $this.text();
            $this.empty();

            var sections = [];

            $.each( originalText.split(" "), function(){
                var $span = $("<span>" + this + "</span>");
                $this.append($span);

                var index = $span.position().top;

                if( sections[index] === undefined ){
                    sections[index] = "";
                }

                sections[index] += $span.text() + " ";
            });

            $this.empty();

            for(var i = 0; i< sections.length; i++){
                if( sections[i] !== undefined ){
                    var spanText = $.trim(sections[i]);                     
                    $this.append("<span>" + spanText + "</span>");
                }
            }

        });

    });

您必须包含jQuery。

我不知道任何内置jQuery的javascript函数可以做到这一点。但是,您可以自己执行此操作,但是如果您有很多文字,则可能会很慢。

从理论上讲,您可以确保将高度设置为自动,删除文本,然后逐个单词重新插入。更改高度时,删除最后一个单词,然后插入dom元素。同样,如果有很多文本,这将很慢,并且更好的方法是不更改原始元素,而是在另一个可以隐藏的元素中进行更改,然后在完成时替换原始元素。这样,您的用户就不会看到内容消失,然后一个字一个字地回来。

另一种方法是使用类似的原理,从具有height auto的相同大小的空元素开始,并插入一个新字符和一个空格,直到获得新行。从那里,您可以将其用作上述技术的近似值,或者可以在考虑到dom元素的宽度的情况下,盲目累加每个字符串的长度,直到找到新的行。不过,这种技术对等宽字体效果更好,这是仅在近似时使用它的地方。

就是说,有一种方法可以使用画布来测量文本,但这可能是极端的。从理论上讲,将是创建画布元素,获取上下文,设置所有字体属性,然后使用该context.measureText()方法。可以在此处找到使用它的示例

不确定确切的用例是什么,但是http://code.google.com/p/hyphenator/可能是您的问题的解决方案,或者如果您深入到hyphenator.js源代码,则可以找到代码您正在寻找。

我认为使用正则表达式检测起来会更容易-在保持效率的同时减少代码量。

这对我有用:

if ((/(\r\n|\n|\r)/.test($(this).val()))) {
    alert('there are line breaks here')
}

我不确定这是否适用于您损坏的字符串,但是它适用于使用jQuery检测行中断。

或者,您可以将文本块的宽度与其父级的宽度进行比较。如果该块至少是其父对象宽度的98%,则可以确定它会破裂

本文地址:http://jquery.askforanswer.com/yongjqueryjiancehuanxingfu.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!