How to 'untag' an element?

[Razzbar]

What is the preferred method of removing the tagging of an element
without
removing the text? IOW, how do I turn this

<span>I want to keep this <strong>and this, too</strong> but not
strongly</span>

into this..

<span>I want to keep this and this, too but not strongly</span>

....?

Hey, don't tell me to used notepad! I mean I want to do it
dynamically,
on the fly, in Javascript.

I rekon I can use removeNode() to remove the <strong> element and save
the
innerHTML, but then where do I put the innerHTML?

In IE, it's possible to say "... el.outerHTML = el.innerHTML " but this
isn't DOM, is it?

 

[Martin Honnen]

What is the preferred method of removing the tagging of an element
without
removing the text? IOW, how do I turn this

<span>I want to keep this <strong>and this, too</strong> but not
strongly</span>

into this..

<span>I want to keep this and this, too but not strongly</span>

With IE (and other browser implementing innerText) you could do
spanElement.innerText = spanElement.innerText;

In IE, it's possible to say "... el.outerHTML = el.innerHTML " but this
isn't DOM, is it?

With full W3C DOM Level 2 range support as Mozilla has it is easy:

var span = document.getElementById('spanid');
var range = document.createRange();
range.selectNodeContents(span);
var textContent = range.toString();
var textNode = document.createTextNode(textContent);
range.deleteContents();
span.appendChild(textNode);

With DOM Level 3 Core textContent as new Mozillas have it you could
simply set
spanElement.textContent = spanElement.textContent

If you want to implement it with DOM Level 1 or 2 Core stuff then walk
the descendants of an element to collect the text content, then remove
all child nodes and append a single newly created text node with the
collected text.

 

[Tomasz Cenian]

Martin Honnen napisał(a):

[snip]

He could also use:

sp=document.getElementById('spanId');
sp.innerHTML=sp.innerHTML.replace(/<\/*[^>]+>/ig,'');

The method would be widely supported even though 'innerHTML' is
officially not part of a standard.

 

[Thomas 'PointedEars' Lahn]

What is the preferred method of removing the tagging of an element
without removing the text? IOW, how do I turn this

<span>I want to keep this <strong>and this, too</strong> but not
strongly</span>

into this..

<span>I want to keep this and this, too but not strongly</span>

...?

I'd prefer this (untested, much feature testing omitted):

/**
* Returns the text content of a document node.
*
* @author (C) 2005 Thomas Lahn <[email protected]>
* @argument Node oNode
* @return type string
* The text content of @{(oNode)}.
*/
function getTextContent(oNode)
{
var text = "";

if (oNode)
{
// W3C DOM Level 3
if (typeof oNode.textContent != "undefined")
{
text = oNode.textContent;
}

// W3C DOM Level 2
else if (oNode.childNodes && oNode.childNodes.length)
{
for (var i = oNode.childNodes.length; i--
{
var o = oNode.childNodes;
if (o.nodeType == ((Node && Node.TEXT_NODE) || 3))
{
text = o.nodeValue + text;
}
else
{
text = getTextContent(o) + text;
}
}
}

// proprietary: IE4+
else if (typeof oNode.innerText != "undefined")
{
text = oNode.innerText;
}
}

return text;
}

/**
* Sets the text content of a document node.
*
* @author (C) 2005 Thomas Lahn <[email protected]>
* @argument Node oNode
* @return type boolean
* <code>true</code> if successful, <code<false</code> otherwise.
*/
function setTextContent(oNode, sContent)
{
var result = false;

if (oNode)
{
// W3C DOM Level 3
if (typeof oNode.textContent != "undefined")
{
oNode.textContent = sContent;
result = (oNode.textContent == sContent);
}

// W3C DOM Level 2
else if (oNode.removeChild
&& oNode.firstChild
&& oNode.appendChild
&& document.createTextNode)
{
while (oNode.firstChild)
{
oNode.removeChild(oNode.firstChild);
}

result = !!oNode.appendChild(document.createTextNode(sContent));
}

// proprietary: IE4+
else if (typeof oNode.innerText != "undefined")
{
oNode.innerText = sContent;
result = (oNode.innerText == sContent);
}
}

return result;
}

setTextContent(
referenceToSpanElement,
getTextContent(referenceToSpanElement));

In IE, it's possible to say "... el.outerHTML = el.innerHTML " but this
isn't DOM, is it?

*All* client-side manipulation of a document element tree is based on a
DOM (Document Object Model). The method you are mentioning is simply not
defined in the W3C DOM (Level 2+), but in proprietary DOMs, the IE4 DOM
and the Gecko DOM.


PointedEars