Merianos Nikos Merianos Nikos - 1 month ago 5
HTML Question

How to replace anchor element with the innerHTML of itself

I try to write a script based on JavaScript for replacing the current selected anchor element with it's inner HTML.

You can also find a simple running example in JSFiddle. To run the example, click on the first link, and the click the button.

So, for example, if I have the following HTML:

<p>
Wawef awef <a href="http://www.somesite.com/"><em>replace</em> <strong>me</strong></a>
falwkefi4hjtinyoh gf waf eerngl nregsl ngsekdng selrgnlrekg slekngs ekgnselrg nselrg
<a href="http://www.anothersite.com/>replace me</a> klserng sreig klrewr
</p>


and I like when I click on some of the two anchors to remove the anchor with it's inner HTML. This mean, that if I click on the first anchor element, and click the appropriate button to replace the anchor the result should be like that:

<p>
Wawef awef <em>replace</em> <strong>me</strong> falwkefi4hjtinyoh gf waf eerngl
nregsl ngsekdng selrgnlrekg slekngs ekgnselrg nselrg <a href="http://www.anothersite.com/>replace me</a>
klserng sreig klrewr
</p>


My JavaScript code for this functionality is the following:

// Start tracking the click event on the document
document.addEventListener(
'click',
function(event)
{
// If right click, return
if(event.button == 2)
{
return;
}

// Get the current clicked document element
var link = event.target;

while(link && !(link instanceof HTMLAnchorElement))
{
link = link.parentNode;
}

// Get the element with ID wpf-remove-element-now
var clickedLink = document.getElementById("wpf-remove-element-now");

// If the element exists
if(clickedLink !== null)
{
// By executing this code, I am ensuring that I have only
// one anchor element in my document with this ID

// Remove the id attribute
clickedLink.removeAttribute('id');
}

// If ther is no link element
if(!link)
{
// Disable my "unlink" button
editor.commands.customunlinkcmd.disable();
// and return
return;
}

event.preventDefault();
event.stopPropagation();

// If the user has clickde on an anchor element then
// enable my "unlink" button in order to allow him to
// to replace the link if he like to.
editor.commands.customunlinkcmd.enable();

// Set the id attribute of the current selected anchor
// element to wpf-remove-element-now
link.setAttribute('id', 'wpf-remove-element-now');
}
);

var $unlink_button = document.getElementById('unlink');

$unlink_button.addEventListener(
'click',
function(event)
{
// Get the element with ID wpf-remove-element-now
var link = document.getElementById("wpf-remove-element-now");
// Create a new text node that contains the link inner HTML
var text = document.createTextNode(link.innerHTML);

// Make the replacement
link.parentNode.replaceChild(text, link);
}
);


Everything until now is correct, appart of the replacement of the link. I have try the above code, but the result I get is like the following one:

Wawef awef <em>replace</em> <strong>me</strong> falwkefi4hjtinyoh gf waf eerngl
nregsl ngsekdng selrgnlrekg slekngs ekgnselrg nselrg replace me klserng sreig klrewr


I mean the anchor is replaced with the text form of the inner HTML and not with the HTML form of the inner HTML.

So the question is, how can I do this kind of replacement.

Answer

The answer was much simpler that I thought. I placed the solution below for anybody that need an equivalent solution :) :

$unlink_button.addEventListener(
    'click',
    function(event)
    {
        // Get the element with ID wpf-remove-element-now
        var link          =    document.getElementById("wpf-remove-element-now");

        // By this code you replace the link outeHTML (the link itself) with
        // the link innerHTML (anything inside the link)
        link.outerHTML    =    link.innerHTML;
    }
);

Here you can find the running solution : JSFiddle

Note: The inspiration for this solution found in the web page.