CODEWITHSUNDEEP
javascriptjqueryreplace
James Korden
James Korden

Reputation: 634

Unable to replace a string using a regular expression

I was playing with jsfiddle here: http://jsfiddle.net/dm9eebz9/

HTML

<div id="wrapper">
    <p class="body">Line 1
        <br>
        <br>Line 3</p>
    <p class="body">Line 1
        <br>Line 2
        <br>
        <br>
        <br>
        <br>Line 6</p>
    <p class="body">Line 1
        <br>Line 2</p>
</div>

Javascript/jQuery

$('#wrapper p.body').each(function () {
    var temp = $(this).innerHTML;
    this.innerHTML = temp.replace(/(<br>)+/gim, "<br>");
});

My goal was to try to get rid of more than 2 <br>'s when they occur. However, it doesn't seem to recognize temp. Is this jsfiddle behavior, or am I making an obvious error?

Upvotes: 0

Views: 146

Answers (4)

Andrew Whitaker
Andrew Whitaker

Reputation: 126042

I really don't think regular expressions are the right tool for this. You can use a combination of .contents and .filter to remove the duplicate <br /> tags:

var prev = null;
var $nodes = $('.body')
    .contents()
    .filter(function () {
        return this.nodeType !== 3 || $.trim(this.data) !== "";
    });

for (var i = 1; i < $nodes.length; i++) {
    if ($nodes.eq(i).is('br') && $nodes.eq(i-1).is('br')) {
        $nodes.eq(i).remove();
    }
}

The complexity here is the text nodes in between the <br /> tags, thus the two-step process.

Example: http://jsfiddle.net/dm9eebz9/9/

Upvotes: 1

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93551

You need to use the correct object for the innerHTML property. That is a DOM object property and not a jQuery one. You can either use the innerHTML DOM property on the DOM element:

$('p.body').each(function () {
    var temp = this.innerHTML;
    this.innerHTML = temp.replace(/(<br>)+/gim, "<br>");
});

JSFiddle: http://jsfiddle.net/dm9eebz9/6/

or use the html() method on a jQuery object:

$('p.body').each(function () {
    var temp = $(this).html();
    this.html(temp.replace(/(<br>)+/gim, "<br>"));
});

http://jsfiddle.net/dm9eebz9/7/

Note a "correct" line break is <br/>, not <br> but I gather you cannot change that

Upvotes: 0

iambriansreed
iambriansreed

Reputation: 22241

Use .html() not innerHTML;

The regex pattern /(<br>\s*)+/ takes white space into account with \s* which matches 0 or more white space characters.

$('p.body').each(function () {
    var temp = $(this).html();
    $(this).html(temp.replace(/(<br>\s*)+/gim, "<br>"));
});

Also as commented, use your browsers console for debugging and always RTFM.

Fiddle: http://jsfiddle.net/dm9eebz9/4/

Upvotes: 1

masum7
masum7

Reputation: 832

The jsfiddled: http://jsfiddle.net/pe6w7z1e/1/

The idea is: there will be one break and one/more (one/more spacenewline + break) >> replace with just one break

Here is the modified code:

$('p.body').each(function () {
    var elem = $(this)
    var temp = elem.html();
    elem.html(temp.replace(/<br>(\s+<br>)+/img, "<br>"));

});

Please mark as answer if it answers your question

I think it is better to use jquery all cases. Mixing of Jquery and raw javascript is not good concept.

Upvotes: 1

Related Questions