CODEWITHSUNDEEP
javascriptjqueryfunctionreplacematch
tim peterson
tim peterson

Reputation: 24315

javascript match replace text

quick question, I have some markdown HTML content that I'd like to convert from double asterisks to bold.

the error i'm getting is: `Uncaught TypeError: Cannot call method 'replace' of null '

here's the jsfiddle: http://jsfiddle.net/fz5ZT/9/

here's the HTML:

<div class="comments">comment 1** is good**</div>
<div class="comments">comment 2**is bad**</div>

here's the JS:

function markdown(markdownable){

  var boldMatch = markdownable.match(/\*\*[A-Za-z0-9]+\*\*/gim), 
  boldReplace = boldMatch.replace(/\*\*[A-z0-9]+\*\*/gim, '<span style="font-  weight:bold;color:blue;">'+boldMatch+'</span>'),                   
  markdownable = markdownable.replace(boldMatch, boldReplace),    
  markdownable = markdownable.replace(/\*\*/gi, "");

  return markdownable;
}

$('.comments').each(function(){  
   var markdownable=$(this).html(), comments=markdown(markdownable);
});

if you might be able to help i'd greatly appreciate it,

thanks, tim

update thanks all! please see this for a working demo: http://jsfiddle.net/fz5ZT/30/

Upvotes: 0

Views: 3153

Answers (5)

David Gorsline
David Gorsline

Reputation: 5018

You don't want to call .replace() on boldMatch until you know that there is a value in there to work with, that is, if there was no match.

Safer computing:

var boldMatch = markdownable.match(/\*\*[A-Za-z0-9]+\*\*/gim);
if (boldMatch) { 
  var boldReplace = boldMatch.replace(/\*\*[A-z0-9]+\*\*/gim, '<span style="font- weight:bold;color:blue;">'+boldMatch+'</span>');
}

etc.

Update:

This line of code also makes it difficult to trace what's going on:

var markdownable=$(this).html(), comments=markdown(markdownable);

Declaring two variables on one line with var is generally frowned on. Better:

var markdownable=$(this).html();
if (markdownable) {
    comments=markdown(markdownable);
}

Upvotes: 1

Phrogz
Phrogz

Reputation: 303411

markdownable = markdownable.replace( /\*\*(.+?)\*\*/gm, '<strong>$1</strong>' );

However, instead of performing a half-hearted, well-intentioned, doomed-to-fail attempt at reinventing the wheel, why not just use an existing JavaScript Markdown library?

Edit: Here's a more robust regex that (like Markdown) requires there to be no whitespace right after the "open" or before the "close":

var bold = /\*\*(\S(.*?\S)?)\*\*/gm;
markdownable = markdownable.replace( bold, '<strong>$1</strong>' );

Upvotes: 7

rlemon
rlemon

Reputation: 17667

function markdown(markdownable) {

    var boldMatch = markdownable.match(/[\*]{2}( .+)?[\*]{2}/gim);
    if (boldMatch && (boldMatch = boldMatch[0])) {
        var boldReplace = boldMatch.replace(/[\*]{2}( .+)+?[\*]{2}/gim, '<span style="font-weight:bold;color:blue;">' + boldMatch + '</span>');
        markdownable = markdownable.replace(boldMatch, boldReplace);
        markdownable = markdownable.replace(/\*\*/gi, "");
    }
    return markdownable;
}

$('.comments').each(function() {

    var markdownable = $(this).html(),
        comments = markdown(markdownable);

    console.log(comments);
});​

this is by far not the best solution... however it is the 'fix' for your attempt. Hopefully you can learn something about where you went wrong.

Upvotes: 1

Anirban
Anirban

Reputation: 589

May be you can take a look at the following solution :

Find text string using jQuery?

I believe you need to do do something very similar : 

  $('*:contains("I am a simple string")').each(function(){
 if($(this).children().length < 1) 
      $(this).html( 
           $(this).text().replace(
                /"I am a simple string"/
                ,'<span containsStringImLookingFor="true">"I am a simple string"   </span>' 
           )  
       ) 
});

For making the element bold you need to use the addClass() once the replace has taken place.

Thanks

Upvotes: 1

Evan Davis
Evan Davis

Reputation: 36592

Your first regex match is ignoring the whitespace in the string. you need to add a space to your allowed character set, [ a-z0-9]; you don't need the the A-Z because of the i.

Also, match returns an array, so you need to get the first match, boldMatch[0] in order to access the string returned.

Upvotes: 2

Related Questions