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

[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.

 

[scriptguru]

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

 

[Jake Barnes]

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").getElementsByTagName("img")

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

 

[RobG]

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.

 

[Gabriella]

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.

 

[RobG]

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>