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/(我添加了一些格式以查看发生了什么)