/    Sign up×
Community /Pin to ProfileBookmark

Find tag and replace it and its content

Copy linkTweet thisAlerts:
Aug 06.2004

Example:

<div id=”A” contentEditable> <div id=”B”> <img id=”IMAGE” src=”something.gif”> </div><div id=”C”> This is text </div> </div>

1) How do I search for <div id=”B”>, replacing everything within <div id=”B”> and [B]its[/B] </div> with another <img>?

2) And if <div id=”B”> doesn’t exist, is it possible to search for <div id=”A”> and insert <div id=”B”> <img id=”IMAGE” src=”something.gif”> </div> [B]BEFORE[/B] <div id=”C”>, leaving the <div id=”C”> content untouched, that is, without replacing <div id=”C”> and have the code look like in the example above.

Thanks!

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@javaNoobieAug 06.2004 — hi,

How do I search for <div id="B">, replacing everything within <div id="B"> and [B]its[/B] </div> with another <img>? [/QUOTE]

why would u wan to replace its </div> tag? in the end u still have to close it somewhere in the document.

FYI: to get <div id="b"> and replace everything inside [B]excluding[/B] its </div>:

[CODE]
var element = document.getElementById("b");
element.innerHTML = "<img src='somethingelse.gif'></img>"
[/CODE]
---------------------

And if <div id="B"> doesn't exist, is it possible to search for <div id="A"> and insert <div id="B"> <img id="IMAGE" src="something.gif"> </div> BEFORE <div id="C">, leaving the <div id="C"> content untouched, that is, without replacing <div id="C"> and have the code look like in the example above.
[/QUOTE]
[CODE]
<html>
<head>
<TITLE>Test Page</TITLE>
<script language="javascript">

function doIt(){
var element = document.getElementById("b");
if (element == null){
element = document.getElementById("a");
alert(element.innerHTML);
element.innerHTML = "<div id='b'></div>" + element.innerHTML;
alert(element.innerHTML);
}else{alert("it exists");}
}
</script>
</head>
<body onload="doIt()">
<div id='a'><div id='c'></div></div>
<form>
<input type='button' value="Check if divB exists" onclick="doIt()"></input>
</form>
</body>
</html>
[/CODE]

however the changes isnt reflected when u view source.. =/

hope this helps.
Copy linkTweet thisAlerts:
@magoauthorAug 06.2004 — Works like a charm!

Also discovered that it's very useful when searching for contents between the tag and its end-tag, e.g. <div id="b"> some content... </div> , by replacing:

var element = document.getElementById("b");

with

var element = document.getElementById("b").innerHTML;

and

if (element == null){

with

if (element == (""){

Thanks alot mate - really nice of you!
Copy linkTweet thisAlerts:
@magoauthorAug 08.2004 — I ran into a problem...

[U]The HTML code now looks like this[/U]:

<div id="A"><img id="IMAGE"></img><div id="B"></div><div id="C"></div></div>


[U]The javascript like this[/U]:

function ifEmptyImgTag(){

var element = document.getElementById("IMAGE");

if (element.innerHTML == ""){

element = document.getElementById("B");

element.innerHTML = '1234';

}else{ifNotEmptyImgTag();}

}

function ifNotEmptyImgTag(){
var element = document.getElementById("B");
element.innerHTML= "5678";
}


[U]If I change[/U]:

var element = document.getElementById("IMAGE");

to

var element = document.getElementById("C");

...then it works, but not with "IMAGE". Why is that? Doesn't innerHTML function with img-tags?
Copy linkTweet thisAlerts:
@PittimannAug 08.2004 — Hi!

The image tag is html, but doesn't contain innerHTML. It is innerHTML of the container where you place it.

<opening container tag>[COLOR=blue]some content[/COLOR]</closing container tag>

The blue stuff is innerHTML of the container tag.

Cheers - Pit
Copy linkTweet thisAlerts:
@neil9999Aug 08.2004 — If you want to change the image, do this:

document.getElementById("IMAGE").src="animage.gif";

Neil
Copy linkTweet thisAlerts:
@magoauthorAug 08.2004 — Both of you, thanks for your fast replies...

I'm using ContentEditable and sometimes it happens that some text is misplaced, appearing between the <img> and </img> tag. To avoid this I must get to the text appearing between these tags so that I can place it somewhere else. Any ideas of how to do this?
Copy linkTweet thisAlerts:
@PittimannAug 08.2004 — Hi!

If you are using normal HTML for your markup, the img tag does not need and does not have a closing tag. And by any means: an img tag does not have innerHTML. Why don't you just stript out the '</img>'?

Cheers - Pit
Copy linkTweet thisAlerts:
@magoauthorAug 08.2004 — The HTML code now looks like this:

<div id="A"><img id="IMAGE"></img><div id="B"></div><div id="C"></div></div>[/QUOTE]

I tried that earlier, but how do I then get to (catch) the text that appears between <img> and <div id="B">?

Really appreciate that your trying to help me out.
×

Success!

Help @mago spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...