jQuery/JS,删除/修剪尾部 html 换行符?

发布于 2024-08-19 02:52:43 字数 919 浏览 6 评论 0原文

我正在寻找一些关于删除尾随 html 的最有效方法的想法 <br/>使用 javascript 或 jquery 标记。

规则:

  1. 必须删除前面和末尾的 br。
  2. 它必须删除非关闭和自关闭 br 标签。
  3. 文本内容中的所有 br 都必须保持不变。

HTML:

<div class="generatedContent">
    <br>My awesome content.
    <br><br>Some More awesome content.
    <br>
    <br>
    <br>I still need the content written here<br/>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
</div>



所需输出:

<div class="generatedContent">
    My awesome content.
    <br><br>Some More awesome content.
    <br>
    <br>
    <br>I still need the content written here
</div>

I'm looking for some ideas for the most efficient way to remove trailing html <br/> tags using javascript or jquery.

RULES:

  1. The br, at the front and end must be removed.
  2. It must remove non-closing and self-closing br tags.
  3. All br within the textual content must remain untouched.

THE HTML:

<div class="generatedContent">
    <br>My awesome content.
    <br><br>Some More awesome content.
    <br>
    <br>
    <br>I still need the content written here<br/>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
</div>


THE DESIRED OUTPUT:

<div class="generatedContent">
    My awesome content.
    <br><br>Some More awesome content.
    <br>
    <br>
    <br>I still need the content written here
</div>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

用心笑 2024-08-26 02:52:43

无法理解为什么您想为此使用正则表达式,就像大多数答案一样。在这里使用 DOM 方法很简单:

function isBrOrWhitespace(node) {
    return node && ( (node.nodeType == 1 && node.nodeName.toLowerCase() == "br") ||
           (node.nodeType == 3 && /^\s*$/.test(node.nodeValue) ) );
}

function trimBrs(node) {
    while ( isBrOrWhitespace(node.firstChild) ) {
        node.removeChild(node.firstChild);
    }
    while ( isBrOrWhitespace(node.lastChild) ) {
        node.removeChild(node.lastChild);
    }
}

$(".generatedContent").each( function() {
    trimBrs(this);
} );

Can't understand why you'd want to to use regular expressions for this, as most answers are. Using DOM methods is easy here:

function isBrOrWhitespace(node) {
    return node && ( (node.nodeType == 1 && node.nodeName.toLowerCase() == "br") ||
           (node.nodeType == 3 && /^\s*$/.test(node.nodeValue) ) );
}

function trimBrs(node) {
    while ( isBrOrWhitespace(node.firstChild) ) {
        node.removeChild(node.firstChild);
    }
    while ( isBrOrWhitespace(node.lastChild) ) {
        node.removeChild(node.lastChild);
    }
}

$(".generatedContent").each( function() {
    trimBrs(this);
} );
生生不灭 2024-08-26 02:52:43

试试这个:

var everything = $('.generatedContent').contents();
for(var i=everything.length-1;i>0;i--)
{
    if((everything.get(i).tagName == 'BR'
           && everything.get(i-1).tagName == 'BR')
        || (everything.get(i).textContent.match(/\w/)==null))
        $(everything.get(i)).remove();
    else
        break;
}

我已经尝试过了,它似乎可以在 FF 和 IE7 中工作。

Try this:

var everything = $('.generatedContent').contents();
for(var i=everything.length-1;i>0;i--)
{
    if((everything.get(i).tagName == 'BR'
           && everything.get(i-1).tagName == 'BR')
        || (everything.get(i).textContent.match(/\w/)==null))
        $(everything.get(i)).remove();
    else
        break;
}

It seems to work in FF and IE7, that I've tried.

呢古 2024-08-26 02:52:43

可能可以改进,但它应该有效:

$('.generatedContent').each(function() {
    var str = $(this).html();
    var regex1 = /^([\n ]*)(<br.*?>)*/;
    var regex2 = /(<br.*?>)*([\n ]*)$/;
    str = str.replace(regex1,'');
    str = str.replace(regex2,'');
    $(this).html(str);
})

Could probably be improved but it should work:

$('.generatedContent').each(function() {
    var str = $(this).html();
    var regex1 = /^([\n ]*)(<br.*?>)*/;
    var regex2 = /(<br.*?>)*([\n ]*)$/;
    str = str.replace(regex1,'');
    str = str.replace(regex2,'');
    $(this).html(str);
})
玻璃人 2024-08-26 02:52:43

很简单。获取 generatedContent div 的 HTML,然后应用以下正则表达式:

s = s.replace(/^(\s*<br\s*\/?>)*\s*|\s*(<br\s*\/?>\s*)*$/g, '')

使用纯 JS 可能有更有效的方法,但这可能更简洁。

Pretty simple. Take the HTML of the generatedContent div then apply the following regex:

s = s.replace(/^(\s*<br\s*\/?>)*\s*|\s*(<br\s*\/?>\s*)*$/g, '')

There's probably a more efficient way to do it using pure JS, but this is probably more succint.

世界等同你 2024-08-26 02:52:43

这是一个在 Firefox 中适用于我的非正则表达式解决方案。可能可以使用一些更好的边缘情况处理,但这个想法是有效的。基本上它只是找到第一个和最后一个非空文本节点并删除之前和之后的所有节点。

var firstValidTextNode = -1;
var lastValidTextNode = -1;
$('.generatedContent').contents().each(function(index){
    if (this.nodeType != 1 && $.trim($(this).text()).length) {
        if (firstValidTextNode == -1) firstValidTextNode = index;
        lastValidTextNode = index;
    }
});

if (lastValidTextNode != -1 && firstValidTextNode != -1)
    $('.generatedContent').contents().slice(0, firstValidTextNode).remove().end().slice(lastValidTextNode + 1).remove();

Here is a non regex solution that works for me in Firefox. Could probably use some better edge case handling but the idea works. Basically it just finds the first and last non-empty text nodes and removes all nodes before and after.

var firstValidTextNode = -1;
var lastValidTextNode = -1;
$('.generatedContent').contents().each(function(index){
    if (this.nodeType != 1 && $.trim($(this).text()).length) {
        if (firstValidTextNode == -1) firstValidTextNode = index;
        lastValidTextNode = index;
    }
});

if (lastValidTextNode != -1 && firstValidTextNode != -1)
    $('.generatedContent').contents().slice(0, firstValidTextNode).remove().end().slice(lastValidTextNode + 1).remove();
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文