Click here to Skip to main content
14,382,805 members
Rate this:
Please Sign up or sign in to vote.
When someone comment on Blogger with [img][/img] tag then this HTML code is published. Assume the code like that
<div id="mm">[img]https://www.gravatar.com/avatar/4ce47f47105a3bd1ca4700f02b5deff1?s=32&d=identicon&r=PG[/img]</div>
Our javascript should find the [img] tag and replace that with an image. So javascript may be like this:
var s;
s = document.getElementById("mm").innerHTML
s = s.replace("[img]","'");  
s = s.replace("[/img]","'"); 
var b;
b = "<img src="+s+"></img>"
document.getElementById("mm").innerHTML = b;

it works when the div id="mm" contains only [img] [/img] tag. but when their is other text or code then it fails to thdisplay e image. Please help me. Thanks in advance
Posted
Updated 19-Jun-14 3:43am
v2
Comments
Snesh Prajapati 19-Jun-14 9:03am
   
As you are saying "when their is other text or code then it fails to display the image". Can you write that text or code, which is creating the problem ?
Mrinmoy Das 19-Jun-14 10:44am
   
I mean if i write <div id="mm"> Hi friends! i am posting a picture with my comment. [img]https://www.gravatar.com/avatar/4ce47f47105a3bd1ca4700f02b5deff1?s=32&d=identicon&r=PG[/img]</div> then in the javascript variable s stores all the html code and after replacing [img] & [/img] it gives img url with the other text. Actually i want to replace [img]....[/img] tag with a picture. thats all. thanks snesh prajapati for responding. i think you can help me. @SneshPrajapati
Rate this:
Please Sign up or sign in to vote.

Solution 1

You are placing the content of the [img][/img] structure into the
<img src="Your captured content enters here after the JS execution"></img>


If the content of the [img][/img] does not make a valid src property, obviously it will not show the intended image.

Cheers.
C
   
Comments
Mrinmoy Das 19-Jun-14 10:47am
   
yes you understood. if the src is right then image must visible.. but how to extract the src from a text like this :
" Hello i am uploading a pic [img](picture url)[/img] "
Joezer BH 22-Jun-14 8:27am
   
In this case, instead of:
s = s.replace("[img]","'");
s = s.replace("[/img]","'");

do:

var b = s.split("[img]")[1];
b = b.split("[/img]")[0];
b = "<img src='" + b + "'></img>";

Cheers,
C
Rate this:
Please Sign up or sign in to vote.

Solution 2

I have modified the code for demo and below code is working as expected:
(for verification I have put alert for url, you can remove that)

<div id="mm">Some Crap Text[img]https://www.gravatar.com/avatar/4ce47f47105a3bd1ca4700f02b5deff1?s=32&d=identicon&r=PG[/img]Some Crap Text
</div>

<script>
    var s;
    s = document.getElementById("mm").innerHTML
    var afterImg = s.split("[img]")[1];
    var url = afterImg.split("[/img]")[0];
    alert(url);
    var b = "<img src=" + url + "></img>"
    document.getElementById("mm").innerHTML = b;
</script>


Please let me know if any further issue. Thanks.
   
v3
Comments
Snesh Prajapati 20-Jun-14 0:21am
   
Thanks Tadit ! It is so cool to see your comment with 5 !! :)
   
Hey, most welcome and you deserved it. :)

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100