473,395 Members | 1,677 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,395 software developers and data experts.

How do I know if there's a certain HTML element in an HTML string (without indexOf)?

Hi,

I have a textarea, where the user can enter any given string.
He can also insert HTML tags, if he/she wishes.

Once I obtain the textarea's string as HTML through
form.body.innerHTML, I would like to figure if there's a certain HTML
tag inside (like <img src...or any other).
I can do it through form.body.value.indexOf("<img") != -1, but I'm
looking for a better way that will enable me to extract the element as
an object from the HTML string, and start checking for the element's
attributes, through obj.getAttribute (the IMG tag's width & height, for
example).

Is there a way to do this?

Thanks,
G.

Sep 17 '06 #1
6 1804
Gabriella wrote:
Hi,

I have a textarea, where the user can enter any given string.
He can also insert HTML tags, if he/she wishes.

Once I obtain the textarea's string as HTML through
form.body.innerHTML, I would like to figure if there's a certain HTML
tag inside (like <img src...or any other).
I can do it through form.body.value.indexOf("<img") != -1, but I'm
looking for a better way that will enable me to extract the element as
an object from the HTML string, and start checking for the element's
attributes, through obj.getAttribute (the IMG tag's width & height, for
example).

Is there a way to do this?

Thanks,
G.
I think your approach is too much work.

Make a DIV somewhere and assign the subject content to it's innerHTML.

<div id="theHTML"></div>
Now if you want to find the image elements it could be something like

document.getElementById("theHTML").getElementsByTa gName("img")
Sep 17 '06 #2

Gabriella написав:
Hi,

I have a textarea, where the user can enter any given string.
He can also insert HTML tags, if he/she wishes.

Once I obtain the textarea's string as HTML through
form.body.innerHTML, I would like to figure if there's a certain HTML
tag inside (like <img src...or any other).
I can do it through form.body.value.indexOf("<img") != -1, but I'm
looking for a better way that will enable me to extract the element as
an object from the HTML string, and start checking for the element's
attributes, through obj.getAttribute (the IMG tag's width & height, for
example).

Is there a way to do this?

Thanks,
G.
You can extract all tags from string using /<img [^>]+>/gi regual
expression.
For example you can use it with .match() method:

var imgs=str.match(/<img [^>]+>/gi)
//now in imgs we have an array-like object with all the image tags

Val

Sep 17 '06 #3

drclue wrote:
I think your approach is too much work.

Make a DIV somewhere and assign the subject content to it's innerHTML.

<div id="theHTML"></div>
Now if you want to find the image elements it could be something like

document.getElementById("theHTML").getElementsByTa gName("img")

I don't think that's true, is it? innerHTML never results in proper DOM
code.

Sep 17 '06 #4
Gabriella wrote:
Hi,

I have a textarea, where the user can enter any given string.
He can also insert HTML tags, if he/she wishes.

Once I obtain the textarea's string as HTML through
form.body.innerHTML,
Using innerHTML to get a form control's value is guaranteed to fail in
some browsers. Gecko-based browsers do not update the innerHTML
property with changes to form control values made by user input. In
such browsers your script will only get the textarea's default value
(which is probably an empty string).

A much better idea is to get the actual value of the textarea, not its
innerHTML.
--
Rob

Sep 17 '06 #5
OK, thanks, so if I get the textarea's value through value attribute,
not innerHTML -
still - is there a way to extract HTML tags and create DOM elements
from this string?
Using regexp and functions like match() & indexOf() will make it very
very hard to find the DOM element's attributes.
Thanks,
G.

Sep 18 '06 #6
Gabriella wrote:
OK, thanks, so if I get the textarea's value through value attribute,
not innerHTML -
still - is there a way to extract HTML tags and create DOM elements
from this string?
Using regexp and functions like match() & indexOf() will make it very
very hard to find the DOM element's attributes.
If you are letting a user enter HTML into a text area, you can:

1. Create a DOM element (a div is likely best) then insert the text
using innerHTML. The browser's HTML parser will then create DOM
elements inside the div and you can use normal DOM manipulation on the
created elements. If there are any typos or errors in the HTML,
results may vary from browser to browser depending on error correction.
It might be best to use an "in-page popup" to show the user the
results of their input and allow them an opportunity to modify it. (see
below).

2. Create your own HTML parser in JavaScript, which I would not
recommend at all.

Below is a simple 'preview' example, the elPos() function is
simplistic, it will work in most cases but not all.

<title>Preview play</title>
<script type="text/javascript">

function previewPop(txt, posObj){
// Variables
var wPort; // Container for preview "window"
var wBar; // Menu bar for wPort
var wClose; // Close text to close wPort
var wCont; // Use to display txt as innerHTMl

// Create outer container
wPort = document.createElement('div');
wPort.style.border = '2px solid #ACACAC';
wPort.style.borderStyle = 'outset';
wPort.style.width = '75%';
wPort.style.zIndex = '10';
wPort.style.backgroundColor = '#ffffff';
if (posObj && 'number' == typeof posObj.top
&& 'number' == typeof posObj.left){
wPort.style.position = 'absolute';
wPort.style.top = posObj.top + 'px';
wPort.style.left = posObj.left + 'px';
}

// Create a top menu bar
wBar = document.createElement('div');
wPort.appendChild(wBar);
wBar.style.backgroundColor = '#D3EDFA';
wBar.style.borderBottom = '1px solid #ACACAC';
wBar.style.textAlign = 'right';

// Add a close button (pseudo-link with onclick)
wClose = document.createElement('span');
wClose.appendChild(document.createTextNode('Close' ));
wClose.onclick = (function(el){
return function(){
el.parentNode.removeChild(el);
}
})(wPort);
wClose.style.textDecoration = 'underline';
wClose.style.cursor = 'pointer';
wClose.style.paddingRight = '10px';
wClose.style.color = 'blue';
wBar.appendChild(wClose);

// Create a div and assign text to its innerHTML property
wCont = document.createElement('div');
wPort.appendChild(wCont);
wCont.innerHTML = txt;
document.body.appendChild(wPort);
}

// Return the position of an element on the page - simple version
function elPos(el){
var pos = {top:0, left:0};
while(el.offsetParent){
pos.top += el.offsetTop;
pos.left += el.offsetLeft;
el = el.offsetParent
}
return pos;
}

</script>
<form action="">
<div>
<input type="button" value="Preview"
onclick="previewPop(this.form.ta.value, elPos(this.form.ta))">
<textarea name="ta" rows="20" cols="50">
&lt;pre>
Here is some text
&lt/pre>
&lt;b>And here is some more bolded&lt;/b>&lt;br>
&lt;img src="g.gif" width="100px" height="150px">
</textarea>
</div>
</form>
--
Rob

Sep 18 '06 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: francisco lopez | last post by:
I hope not sent I twice. ok here is my problem, the javascript form validation works perfect during I put a emaildirection in the <form action:""> comand, like this: <form...
6
by: Dan V. | last post by:
I would like to create a 2D string list (2D ArrayList ???). I would like to pass in a table or query as a parameter and have both columns transform into a 2D ArrayList. When I sort the one...
1
by: Imran Aziz | last post by:
Hello All, I have a navigation system for the site , in which the links are highlighted based on which section the site is in. Now the issue is that I do that using a class="thissection"...
33
by: O-('' Q) | last post by:
....to translate the following to C#.NET style? var i: Integer; begin txtMyIP.Lines.Clear; sHTML := HTTP.Get('http://www.network-tools.com/'); if sHTML = '' then Exit; sIpAddr := 'IP...
2
by: letter4yuting | last post by:
In my method I tried to manipulate a string parameter using IndexOf() method -- even though it compiles all the string methods (IndexOf, Trim, UpperCase....) fail -- except the property Length. The...
1
by: Don | last post by:
Hi all, So i may have painted myself into a corner, am I screwed? I'm developing a message board for a site I work on, fairly simple hierarchy. Topics -> Threads -> Posts. As such, I've...
2
by: Jared | last post by:
Hi I have been trying to find an easy way to strip the hyperlinks out of an html string to make exporting ASP.NET GridView's to Excel a bit more user friendly. Couldn't find anything in these...
4
by: Jason | last post by:
I have a string that looks like this? ihelloworld_zzz_yyy In a single vb.net line, I want to remove the frist character and anything after and including the first "_" resulting in : ...
42
by: Santander | last post by:
how to decode HTML pages encoded like this: http://www.long2consulting.com/seeinaction2008/Simplicity_Beach_table/index.htm Is there script that will do this automatically and generate normal fully...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.