By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
455,771 Members | 1,097 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 455,771 IT Pros & Developers. It's quick & easy.

How to 'untag' an element?

P: n/a
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?

Jul 23 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a


Razzbar wrote:
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.

--

Martin Honnen
http://JavaScript.FAQTs.com/
Jul 23 '05 #2

P: n/a
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.
--
tomasz cenian tcenian at wa dot home dot pl
:::: :: : : http://cenian.boo.pl : : :: ::::
Jul 23 '05 #3

P: n/a
Razzbar wrote:
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 <dh******@PointedEars.de>
* @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[i];
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 <dh******@PointedEars.de>
* @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(sConte nt));
}

// 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
Jul 23 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.