Как заменить анкерный элемент на свой внутренний HTTML

Я пытаюсь написать скрипт на основе JavaScript для замены текущего выбранного элемента привязки его внутренним HTML.

Вы также можете найти простой пример работы в JSFiddle. Чтобы запустить пример, нажмите на первую ссылку и нажмите кнопку.

Так, например, если у меня есть следующий HTML:

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

и мне нравится, когда я нажимаю на некоторые из двух якорей, чтобы удалить привязку с помощью внутреннего HTML. Это означает, что если я нажму на первый элемент привязки и нажмите соответствующую кнопку, чтобы заменить якорь, результат должен быть таким:

<code><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="" target="_blank">replace me</a>
 klserng sreig klrewr
</p>

Мой JavaScript-код для этой функции:

// 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);
 }
);

Все до сих пор правильное, добавление замены ссылки. Я попробовал вышеуказанный код, но результат, который я получаю, выглядит следующим образом:

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

Я имею в виду, что якорь заменяется текстовой формой внутреннего HTML, а не HTML-формой внутреннего HTML.

Итак, вопрос в том, как я могу сделать такую замену.

2 ответа

Вы создаете текстовый узел, поэтому все, что вы вкладываете в него, будет интерпретироваться как текст. Вместо этого, поскольку у вас есть предопределенные теги замены, вы должны создать фактические элементы DOM для их замены. Что-то вроде этого может работать: JSFiddle

var em_elem = document.createElement('em');
em_elem.appendChild(document.createTextNode("replace"));

var strong_elem = document.createElement('strong');
strong_elem.appendChild(document.createTextNode("me"));

var container_span = document.createElement('span');
container_span.appendChild(em_elem);
container_span.appendChild(strong_elem);

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


Ответ был намного проще, чем я думал. Я поставил решение ниже для тех, кому требуется эквивалентное решение :):

$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;
 }
);

Здесь вы можете найти текущее решение: JSFiddle

Примечание: вдохновение для этого решения найдено на веб-странице.

licensed under cc by-sa 3.0 with attribution.