Zastąpić węzeł tekstowy tekstem HTML w JavaScript?

Zostałem skierowany do projektu Linkify na GitHub (https://github.com/cowboy/javascript-linkify) w celu znalezienia i "linkowania" adresów URL i domen po prostu unoszących się w tekście.Zastąpić węzeł tekstowy tekstem HTML w JavaScript?

To świetnie! To całkowicie działa na tekst!

Jednak nie jestem do końca pewien, jak sprawić, żeby działało na węźle tekstowym, który ma tekst, który chcę Linuksować.

Rozumiem, że textNode ma tylko textContent ponieważ .. to cały tekst. Ponieważ funkcja Linkify zwraca HTML jako tekst, czy istnieje sposób na przejęcie obiektu tekstowego i "przepisanie" zawartego w nim kodu HTML z wyjściem Linkify?

Grałem z nim na JSFiddle tutaj: http://jsfiddle.net/AMhRK/9/

function repl(node) { 

var nodes=node.childNodes; 
for (var i=0, m=nodes.length; i<m; i++) 
{ 
    var n=nodes[i]; 
    if (n.nodeType==n.TEXT_NODE) 
    { 
     // do some swappy text to html here? 
     n.textContent = linkify(n.textContent); 
    } 
    else 
    { 
     repl(n); 
    } 
} 
}

Źródło

2013-03-21 Jippers

Twój przykładowy kod jest tak brudny i tak bardzo, że nawet nie wiem, od czego zacząć! Czy możesz go trochę posprzątać i po prostu mieć normalny przykład i ten, który chcesz z textNode? –

http://jsfiddle.net/AMhRK/4/ – Ryan

@ryan jest blisko, ale widzisz, że to już zawiązuje poprawnie już połączone adresy URL. – Jippers

Musisz wymienić textNode z elementu HTML, jak rozpiętości, a następnie ustaw linkified tekstu jak elementu innerHTML.

var replacementNode = document.createElement('span'); 
replacementNode.innerHTML = linkify(n.textContent); 
n.parentNode.insertBefore(replacementNode, n); 
n.parentNode.removeChild(n);

Źródło

2013-03-21 17:11:01

To nie jest takie proste, ponieważ węzeł tekstowy może zawierać wiele elementów "unlinkfied". –

To wydaje się działać! Oto widelec Fiddle z dodatkiem Willa Scotta: http://jsfiddle.net/H2aHH/ – Jippers

to utrzymuje użytkownika 'Wybór', gdzie' .replaceChild() 'does not !! genialny – neaumusic

Dodatkowo do poprzedniej odpowiedzi proponuję bardziej krótki sposób (w oparciu o jQuery):

$(n).replaceWith('Some text with <b>html</b> support');

gdzie n - jest textNode.

Źródło

2017-02-02 17:11:35 IStranger

'replaceWith()' jest dostępny jako [vanilla JavaScript] (https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/replaceWith) w nowoczesnych przeglądarkach (Chrome i Firefox; Edge jest pod rozwój). –

Zastąpić węzeł tekstowy tekstem HTML w JavaScript?

Odpowiedz

Powiązane problemy