Unable to replace a string using a regular expression

Question

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  's when they occur. However, it doesn't seem to recognize temp. Is this jsfiddle behavior, or am I making an obvious error?

I don't think there's an innerHTML property on a jQuery array. — Cᴏʀʏ
– Cᴏʀʏ, Commented Sep 5, 2014 at 13:39
Read these articles to learn how to debug JavaScript, so you can and help yourself. — Felix Kling
– Felix Kling, Commented Sep 5, 2014 at 13:40
What exactly is the final result? Do you want to remove the br if there are more than 2 consecutive br nodes? I.e. it would remove the last two br in the second paragraph? — Felix Kling
– Felix Kling, Commented Sep 5, 2014 at 13:56
if you want to access javascript functions off of jQuery, you need to do this $(this)[0] and it gives you back that raw javascript. — Callum Linington
– Callum Linington, Commented Sep 5, 2014 at 14:13
@No1_Melman: Don't confuse JavaScript with DOM. $(this)[0] returns a DOM element which lets you access the DOM API. Of course you are using JavaSCript, but jQuery is JavaScript as well. — Felix Kling
– Felix Kling, Commented Sep 5, 2014 at 15:39

masum7 · Accepted Answer · 2014-09-05 13:49:57Z

1

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.

answered Sep 5, 2014 at 13:49

masum7

8326 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ivo Coumans Over a year ago

.replace is a javascript method, not jquery

masum7 Over a year ago

Thanks Ivo for your comments. Could you show any reference? What's the alternative for jquery?

Felix Kling Over a year ago

"What's the alternative for jquery? " There is none because jQuery is not a library for text processing.

masum7 Over a year ago

Ah then we can only use replace here.. Thanks Felix

James Korden Over a year ago

I'd use either jquery or javascript only, but the system I am working in (spiceworks) seems to have some major issues with certain things.

iambriansreed · Accepted Answer · 2014-09-05 13:52:32Z

1

Use .html() not innerHTML;

The regex pattern /( \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/

answered Sep 5, 2014 at 13:52

iambriansreed

22.3k6 gold badges66 silver badges81 bronze badges

Comments

Andrew Whitaker · Accepted Answer · 2014-09-05 14:15:12Z

1

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   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   tags, thus the two-step process.

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

edited Sep 5, 2014 at 14:15

answered Sep 5, 2014 at 14:10

Andrew Whitaker

126k32 gold badges296 silver badges308 bronze badges

Comments

iCollect.it Ltd · Accepted Answer · 2014-09-05 13:59:29Z

0

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  , not   but I gather you cannot change that

edited Sep 5, 2014 at 13:59

answered Sep 5, 2014 at 13:42

iCollect.it Ltd

93.9k26 gold badges189 silver badges210 bronze badges

2 Comments

James Korden Over a year ago

cannot be used, as the pages I am editing have , correct or not.

iCollect.it Ltd Over a year ago

Was updating the JSFiddle, but I am dumping this answer as the other answer is far simpler :)

Collectives™ on Stack Overflow

Unable to replace a string using a regular expression

4 Answers 4

5 Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related