javascript - 如何使用jquery检测字符串中的br标签？

Question

我正在制作一个演示，其中我最多显示 30 个字符(完整字符)。它将运行良好。但是当我给定的字符串中有 br 标记时，我的问题失败了。我们都知道 br 换行。所以我当我在哪里找到 br 标签时想要中断。 当我有这个字符串时:

var str = "Ben Nadel reviews the various approaches to Sachin Ramesh Tendulkar is a former Indian cricketer widely acknowledged as the greatest batsman of the modern generation, popularly holds the title  among his fans Sachin Ramesh Tendulkar is a former Indian cricketer widely acknowledged as the greatest batsman of the modern generation, popularly holds the title  among his fansSachin Ramesh Tendulkar is a former Indian cricketer widely acknowledged as the greatest batsman of the modern generation, popularly holds the title  among his fans  substring";

输出:

Ben Nadel reviews the various
approaches to Sachin Ramesh
Tendulkar is a former Indian
cricketer widely acknowledged
as the greatest batsman of the
modern generation, popularly
holds the title among his
fans Sachin Ramesh Tendulkar
is a former Indian cricketer
widely acknowledged as the
greatest batsman of the modern
generation, popularly holds
the title among his
fansSachin Ramesh Tendulkar is
a former Indian cricketer
widely acknowledged as the
greatest batsman of the modern
generation, popularly holds
the title among his fans
substring

那很好。 但是当我在我的字符串中添加 br 标签时，我的概念无法显示 30 个字符。

  br string
var str = "Ben Nadel <br /> reviews the various approaches to Sachin Ramesh Tendulkar is a former <br /> Indian cricketer widely acknowledged as the greatest batsman of the modern <br /> generation, popularly holds the title  among his fans Sachin Ramesh Tendulkar is a former Indian cricketer <br /> widely acknowledged as the greatest batsman of the modern generation, popularly holds the title  among his fansSachin Ramesh Tendulkar is a former Indian cricketer widely acknowledged as the greatest batsman of the modern generation, popularly holds the title  <br /> among his fans  substring";

Ben Nadel   // explain here user find br tag it fine to go next line 
reviews the  // why not it display 30 characters ?
various approaches to Sachin
Ramesh Tendulkar is a former
                             //why boac space display
Indian cricketer widely
acknowledged as the greatest
batsman of the modern 
generation, popularly holds
the title among his fans
Sachin Ramesh Tendulkar is a
former Indian cricketer 
widely acknowledged as the
greatest batsman of the modern
generation, popularly holds
the title among his
fansSachin Ramesh Tendulkar is
a former Indian cricketer
widely acknowledged as the
greatest batsman of the modern
generation, popularly holds
the title                    //why 30 character not display ?
among his
fans substring

我想要一些逻辑。如果字符串中有 br 标记，它会换行并再次显示 30 个字符(整个单词)？ 我们可以这样做吗？ http://jsfiddle.net/yzaaJ/11/

for(var index = 0; index < words.length; index++)
{
    var currentWord = words[index];
    var currentLength = tenLengthString.length;    
    if(((currentLength + currentWord.length + ((currentLength > 0) ? 1: 0))) > 30)
    {        
        html+='<div>'+tenLengthString+'</div>';
        console.log(tenLengthString);        
        tenLengthString = currentWord;        
    } else {
        if(currentLength > 0)
            tenLengthString += " ";    
        tenLengthString += currentWord;
    }    
    if(index == words.length - 1){
      console.log(tenLengthString);
       html+='<div>'+tenLengthString+'</div>';

    }        
}
$("#test").html(html)

Answer 1

既然你想保留断点，你应该先把断点分开。然后为每个 block 使用您现有的代码。

function cleanBreak(str){
    return str
            .replace(/<br >/g, "<br>")
            .replace(/<br \/>/g, "<br>")
            .replace(/<br\/>/g, "<br>");
}

var str = "Ben Nadel <br /> reviews the various approaches to Sachin Ramesh Tendulkar is a former <br /> Indian cricketer widely acknowledged as the greatest batsman of the modern <br /> generation, popularly holds the title  among his fans Sachin Ramesh Tendulkar is a former Indian cricketer <br /> widely acknowledged as the greatest batsman of the modern generation, popularly holds the title  among his fansSachin Ramesh Tendulkar is a former Indian cricketer widely acknowledged as the greatest batsman of the modern generation, popularly holds the title  <br /> among his fans  substring";
var phrases = cleanBreak(str).split("<br>");
var html=[];
for(var pIndex = 0; pIndex < phrases.length; pIndex++){
    html.push("<div class='phrase'>");
    var words = phrases[pIndex].split(" ");
    var tenLengthString = "";
    for(var index = 0; index < words.length; index++)
    {
        var currentWord = words[index];
        var currentLength = tenLengthString.length;    
        if(((currentLength + currentWord.length + ((currentLength > 0) ? 1: 0))) > 30)
        {        
            html.push('<div>'+tenLengthString+'</div>');
            console.log(tenLengthString);        
            tenLengthString = currentWord;        
        } else {
            if(currentLength > 0)
                tenLengthString += " ";    
            tenLengthString += currentWord;
        }    
        if(index == words.length - 1){
          console.log(tenLengthString);
           html.push('<div>'+tenLengthString+'</div>');

        }        
    }
    html.push("</div>");
}
$("#test").html(html.join(''));

http://jsfiddle.net/9TZhE/ (我添加了一些格式以查看发生了什么)