Neden RegEx çıktısı HTML

Question

yerine kaçtı metin yok Bir belirli bir normal ifadeyle eşleşen her dize etrafında bir <span> ... </span> ekler bir Chrome uzantısı yazıyorum. RegEx maçı mükemmel çalışır, ancak metnin etrafına span etiketini doğru şekilde eklemenin bir yolunu bulamıyorum.

Kodum şimdiye kadar geçerli:

// main.js 
var regex_pattern = new RegEx('(apple)', 'g'); // Let's pretend I want to match every instance of 'apple' 
var textNodes = getTextNodes(); // A function that returns a list of every text node from the DOM 
for (var i = 0; i < textNodes.length; i++) { 
    if (textNodes[i].nodeValue.match(regex_pattern)) { 
     textNodes[i].nodeValue = textNodes[i].nodeValue.replace(regex_pattern, "<span class='highlight'>$&</span>"); 
    } 
} 

Bu doğru ve çıkış <span class="highlight">apple</span> (bu durumda 'elma' olarak) benim RegEx desen her maçı belirleyecektir. Tek sorun, bu işlemin Chrome tarafından HTML olarak ele alınmaması, metin olarak kabul edilmesidir. Bu nedenle, highlight sınıfına göre tasarlanmış olan 'apple' dünyasını görmek yerine, birebir çıktıyı görürdü: <span class="highlight">apple<span>

Neden bu gerçekleşir ve stil doğru uygulanacak şekilde nasıl düzeltebilirim? Bunun arzulanandan daha az olduğunu farkettiğimde, eşleşen metni bir yayılma alanına kaydırmak için insertBefore() yöntemini kullanmayı denedim, ancak bu bir şey yapmadı, bu hata kodu nasıl değiştirdiğime bağlı olarak hata ya da span düğümünü ekleyemedi . Sağladığınız içgörü için teşekkürler!

Answer 1

Bir metin düğümünü rastgele HTML ile değiştirmek için nodeValue kullanamazsınız. düğümler insertAdjacentHTML yöntemi olsaydı

function replaceNodeWithHTML(node, html) { 
 
    var parent = node.parentNode; 
 
    if(!parent) return; 
 
    var next = node.nextSibling; 
 
    var parser = document.createElement('div'); 
 
    parser.innerHTML = html; 
 
    while(parser.firstChild) 
 
    parent.insertBefore(parser.firstChild, next); 
 
    parent.removeChild(node); 
 
} 
 
var regex_pattern = /(apple)/g; 
 
var textNodes = [document.querySelector('div').firstChild]; 
 
for (var i = 0; i < textNodes.length; i++) 
 
    if (textNodes[i].nodeValue.match(regex_pattern)) 
 
    replaceNodeWithHTML(
 
     textNodes[i], 
 
     textNodes[i].nodeValue.replace(regex_pattern, "<span class='highlight'>$&</span>") 
 
    );

.highlight { 
 
    background: yellow; 
 
}

<div>I have an (apple). You have an (apple) too.</div>

daha iyi olur, ancak yalnızca elemanlar yapın:

elle yapmalı.

Answer 2

Öğe üzerinde .innerHTML öğesini ayarlayın. TextNode.nodeValue değerini ayarlamak metni yönlendirir.