JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<div class="comment-body">
    [img]http://davidrhysthomas.co.uk/img/dexter.png[/img]
</div>

<div class="comment-body">
[img]http://blog.brightcove.com/sites/all/uploads/FACEBOOK%20ICON.png[/img] random text here
</div>

<div class="comment-body">
Some other stuff, without any bbcode tags.
</div>

JavaScript

function findStringBetween(elem,bbTagStart,bbTagClose){
    var tag = bbTagStart;
    
    function impliedEndTag(tag){
        var impliedEnd = tag.replace(tag.substring(0,1),tag.substring(0,1) + '/');
        return impliedEnd;
    }
    
    var endTag = bbTagClose || impliedEndTag(tag);
    var divString = $(elem).text().trim();
    
    if (divString.indexOf(tag) != -1){
        var tagString = divString.substring(divString.indexOf('[img]') + tag.length,divString.indexOf('[/img'));
        return tagString;
    }
    else {
        return false;
    }
}
$('.comment-body').each(
    function(){
        /* call with two, or three arguments (the third is the optional 'bbTagClose':
            1. elem = this, the DOM node,
            2. '[img]' = whatever bbCode thing you want to use (I'm not sure what's available),
            3. 'bbTagClose' = the end tag of the bbCode, assuming that the end-tag is the same as
                the opening tag, except with a '/' as the second character, the impliedEndTag() function
                will take care of it for you.
        */
       var imgLink = findStringBetween(this,'[img]');
        if (imgLink){
            $(this).replaceWith('<img src="' + imgLink + '" class="commentimg" data-src2="'+ imgLink+'"/>');
        }
    });