JQuery / JS, удаление / обрезка конечных разрывов строк HTML? - PullRequest
Новая
       12

JQuery / JS, удаление / обрезка конечных разрывов строк HTML?

3 голосов
/ 21 января 2010

Я ищу несколько идей для наиболее эффективного способа удаления конечных HTML-тегов <<strong> br /> с использованием javascript или jquery.

ПРАВИЛА:

  1. BR, на передней и задней части должны быть удалены.
  2. Он должен удалять незамкнутые и самозакрывающиеся теги br.
  3. Все элементы текста в текстовом содержании должны оставаться нетронутыми.

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>

Ответы [ 5 ]

4 голосов
/ 21 января 2010

Не могу понять, почему вы хотите использовать регулярные выражения для этого, как большинство ответов. Использовать методы 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);
} );
1 голос
/ 21 января 2010

Может быть улучшено, но должно работать: 

$('.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);
})
1 голос
/ 21 января 2010

Попробуйте это: 

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, которые я пробовал.

0 голосов
/ 21 января 2010

Вот решение без регулярных выражений, которое работает для меня в 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();
0 голосов
/ 21 января 2010

Довольно просто. Возьмите HTML сгенерированного div div, затем примените следующее регулярное выражение: 

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

Вероятно, есть более эффективный способ сделать это с использованием чистого JS, но это, вероятно, более лаконично.

...