使用jQuery基于<br/>标签拆分字符串

9
我应该如何使用jQuery分割包含<br/>标签的字符串?我尝试了以下代码,但在控制台中出现错误。我不确定如何基于<br/>标签拆分字符串。这是我尝试的代码。
jQuery(document).ready(function($)
    {
        var lines = jQuery('this is for testing <br/> How are you<br/>').split('<br/>');
        jQuery.each(lines, function() {
            alert(this);
        });
    });

非常感谢您的反馈。


1
你得到了什么错误? - Dutts
10个回答

12

这里有很多重复的答案,但这个是不同的。如果您可以保证<br/>标签的拼写,其他答案就可以了。但是如果您无法控制HTML,换行标签可能以不同的格式出现:

<br/>
<BR/>
<br />
<br>
<br >
...等等。

所有主要浏览器都可以处理这些格式,但只有第一个格式会被建议的.split("<br/>")操作处理。更健壮的选项是使用正则表达式匹配该标签:

jQuery(document).ready(function($)
{
    var brExp = /<br\s*\/?>/i;
    var lines = ("this is for testing <br/> How are you<BR />").split(brExp);
});

我已经编写了该表达式,使其不区分大小写,在“<br”之后允许任意数量的空格,并且斜杠“/”是可选的。


1
这应该是最佳答案:D - Xahed Kamal
这就是我一直在寻找的。 - dcangulo

10

你想分割一个普通字符串,不要将它传递给$(),而是简单地使用;

jQuery(document).ready(function($)
    {
        var lines = 'this is for testing <br/> How are you<br/>'.split('<br/>');
        jQuery.each(lines, function() {
            alert(this);
        });
    });

2
尝试使用这个:
var exploded = lines.split('<br />'); 

more info here


2
如果您尝试以下操作:
jQuery(document).ready(function($)
    {
        var lines = 'this is for testing <br/> How are you<br/>'.split('<br/>');
        each(lines, function() {
            alert(this);
        });
    });

2

这不是jQuery解决方案,但希望有人会发现它有用。该函数返回一个或两个元素。

function splitContentsOnBr(el) {
    const before = document.createElement('div');
    const after = document.createElement('div');
    let found = false;
    el.childNodes.forEach(c => {
        if (found) {
            after.appendChild(c.cloneNode(true));
        } else if (c.tagName == 'BR') {
            found = true;
        } else {
            before.appendChild(c.cloneNode(true));
        }
    });
    return after.childNodes.length ? [before, after] : [before];
}
document.querySelector('#result').innerHTML = splitContentsOnBr(document.querySelector('h1'))
    .map(el => el.textContent.trim())
    .join(', ');
<h1>
  First part
  <br>
  Second part
</h1>
<div id="result">
</div>


1
“你不能只是做类似这样的事情吗:”
 var lines = 'this is for testing <br/> How are you<br/>'.split('<br/>');

顺便提一下,如果您想要去除空元素,可以像这样过滤lines

// this will get rid of empty elements 
lines = lines.filter(function(n) { 
    return n; 
});

1
jQuery(document).ready(function($)
{

var str = 'this is for testing <br/> How are you<br/>';
var lines = str .split('<br/>');
     jQuery.each(lines, function() {
        alert(this);
    });
});

1
不需要像这样用jQuery包装:

jQuery('this is for testing <br/> How are you<br/>').split('<br/>');

Can be like :

('this is for testing <br/> How are you<br/>').split('<br/>');

演示


1

试试这个

jQuery(document).ready(function($)
    {
        var lines = ('this is for testing <br/> How are you<br/>').split("<br/>");
        jQuery.each(lines, function() {
            alert(this);
        });
    });

演示


1
这是关于编程的工作代码。
jQuery(document).ready(function($)
    {

        var lines = 'this is for testing <br/> How are you<br/>'.split('<br/>');
                alert("workig");
        jQuery.each(lines, function() {
            alert(this);
        });
    });

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接