Does there exist a method or function that can convert the self-closing tags to explicit tags in Javascript? For example:

<span class="label"/>

converted to :

<span class ="label"></span>

I would like to copy a new HTML from the iframe to the outerHTML of the main page, as the new HTML generated contains self-closing tags, the outerHTML doesn't recognize them and then doesn't change and the page doesn't show correctly. But when the format is standard, that is,with the non-self-closing tags, the outerHTML will take the new HTML,and the page shows perfectly.This is why I would like to change the tags.

And this html is in a string

In fact, I don't want to parse HTML, I just want to find the "< span.../>"and replace it with "< span...>< /span>"

Does there exist a method or function that can convert the self-closing tags to explicit tags in Javascript? For example:

<span class="label"/>

converted to :

<span class ="label"></span>

I would like to copy a new HTML from the iframe to the outerHTML of the main page, as the new HTML generated contains self-closing tags, the outerHTML doesn't recognize them and then doesn't change and the page doesn't show correctly. But when the format is standard, that is,with the non-self-closing tags, the outerHTML will take the new HTML,and the page shows perfectly.This is why I would like to change the tags.

And this html is in a string

In fact, I don't want to parse HTML, I just want to find the "< span.../>"and replace it with "< span...>< /span>"

• javascript
• html
• tags

• @Marcel — only in XML mode. Since the end tag for span elements is required in HTML 4, it won't get inserted until you hit the start tag for something it can't contain. – Quentin Commented May 16, 2011 at 9:16
• @David: I stand corrected. I assumed browsers would resolve this kind of 'tag soup' correctly, but I know they don't. – Marcel Korpel Commented May 16, 2011 at 9:25
• They do resolve it correctly … as per the rules laid out in HTML 5. :) – Quentin Commented May 16, 2011 at 9:26
• @David:In fact no, the web page shows incorrectly, that's why I would like to change. – Jamie Commented May 16, 2011 at 9:44
• "What you want" and "What they spec says is correct" are different things. Once the browser has rendered the page, it only has a DOM and it is far too late to try to patch up broken HTML. Fix the HTML before it gets to the browser's HTML parser. – Quentin Commented May 16, 2011 at 9:46

4 Answers 4

try this to replace all self closing tags out of your string (xml/html)

function removeSelfClosingTags(xml) {
    var split = xml.split("/>");
    var newXml = "";
    for (var i = 0; i < split.length - 1;i++) {
        var edsplit = split[i].split("<");
        newXml += split[i] + "></" + edsplit[edsplit.length - 1].split(" ")[0] + ">";
    }
    return newXml + split[split.length-1];
}

I'd use regex:

var spansFixed = htmlString.replace(/<span(.*)\/>/g, '<span$1></span>');

Thanks all, I finally use the silly method to change the self-closing tags, maybe it'll help someone like me:

var splitSpan = textHTML.split(">");
var i=0;
for(i=0;i<splitSpan.length-1;i++){
    var lengthSpan = splitSpan[i].length;
    var subSpan = splitSpan[i].substring(1,5);
    var endSpan = splitSpan[i].charAt(lengthSpan-1);
    
    if(subSpan=="span" && endSpan=="/")
    {           
        splitSpan[i]=setCharAt(splitSpan[i],lengthSpan-1,'>');
        splitSpan[i]=splitSpan[i]+"</span>";
    }
    else
    {
        splitSpan[i]=splitSpan[i]+">";
    }
}

function setCharAt(str,index,chr) {
    if(index > str.length-1) return str;
    return str.substr(0,index) + chr + str.substr(index+1);
}

I can't think of any need for this, as they will automatically be converted by the browser. This can be demonstrated by:

var div = document.createElement('div');
div.innerHTML = '<span/>';
var span = div.getElementsByTagName('span')[0];
span.innerHTML = 'hello';
alert(span.innerHTML);

Edit: It seems this will only work only in XML mode.