W JavaScript, w jaki sposób mogę zamienić tekst na stronie HTML bez wpływu na znaczniki?

Próbuję dowiedzieć się, jak zastąpić JavaScript. Patrzę na całą treść strony i chcę zastąpić dopasowania słów kluczowych NIE w tagu HTML.W JavaScript, w jaki sposób mogę zamienić tekst na stronie HTML bez wpływu na znaczniki?

Oto przykład:

<body> 
    <span id="keyword">blah</span> 
    <div> 
    blah blah keyword blah<br /> 
    whatever keyword whatever 
    </div> 
</body> 

<script type="text/javascript"> 
var replace_terms = { 
    'keyword':{'url':'http://en.wikipedia.org/','target':'_blank'} 
} 

jQuery.each(replace_terms, function(i, val) { 
    var re = new RegExp(i, "gi"); 
    $('body').html(
    $('body').html().replace(re, '<a href="'+ val['url'] +'" target="'+val['target']+'">' + i + '</a>') 
); 
}); 

</script>

szukam zastąpić wszystkie wystąpienia „słowo kluczowe”, które nie jest w tagu HTML (między < i >).

Sądzę, że muszę również zignorować, jeśli "słowo kluczowe" jest w obrębie elementu script lub style.

Źródło

2009-09-18 Phil

Czy nie cała strona z definicji wewnątrz znacznika HTML? –

Tak. HTML, który miałem w moim przykładzie, nie dotarł. Zasadniczo mam na myśli, że nie chcę zastępować żadnych atrybutów tagu. – Phil

Myślę, że ma na myśli w nawiasie (jak nazwa/wartość atrybutu). – Mayo

Nie używaj wyrażenia regularnego do parsowania HTML. [X] [HT] ML nie jest zwykłym językiem i nie można go wiarygodnie przetworzyć za pomocą wyrażeń regularnych. Twoja przeglądarka ma wbudowany dobry parser HTML; niech to znudzi się ćwiczeniem tam, gdzie są znaczniki.

Również nie chcesz pracować na html()/innerHTML na ciele. Spowoduje to serializację i ponowne przeanalizowanie całej strony, która będzie powolna i utraci wszelkie informacje, które nie mogą być serializowane w HTML, takie jak procedury obsługi zdarzeń, wartości formularzy i inne odwołania do JavaScript.

Oto metoda z użyciem DOM, który wydaje się działać dla mnie:

function replaceInElement(element, find, replace) { 
    // iterate over child nodes in reverse, as replacement may increase 
    // length of child node list. 
    for (var i= element.childNodes.length; i-->0;) { 
     var child= element.childNodes[i]; 
     if (child.nodeType==1) { // ELEMENT_NODE 
      var tag= child.nodeName.toLowerCase(); 
      if (tag!='style' && tag!='script') // special case, don't touch CDATA elements 
       replaceInElement(child, find, replace); 
     } else if (child.nodeType==3) { // TEXT_NODE 
      replaceInText(child, find, replace); 
     } 
    } 
} 
function replaceInText(text, find, replace) { 
    var match; 
    var matches= []; 
    while (match= find.exec(text.data)) 
     matches.push(match); 
    for (var i= matches.length; i-->0;) { 
     match= matches[i]; 
     text.splitText(match.index); 
     text.nextSibling.splitText(match[0].length); 
     text.parentNode.replaceChild(replace(match), text.nextSibling); 
    } 
} 

// keywords to match. This *must* be a 'g'lobal regexp or it'll fail bad 
var find= /\b(keyword|whatever)\b/gi; 

// replace matched strings with wiki links 
replaceInElement(document.body, find, function(match) { 
    var link= document.createElement('a'); 
    link.href= 'http://en.wikipedia.org/wiki/'+match[0]; 
    link.appendChild(document.createTextNode(match[0])); 
    return link; 
});

Źródło

2009-09-18 14:23:41 bobince

'i -> 0' Sprytny. Nigdy wcześniej tego nie widziałem. –

Nie mogę pochwalić się tym, jest to idiom dla odwróconej iteracji w językach podobnych do C! :-) – bobince

Zwykle używam tylko 'i -', jak w: 'for (var i = 100; i--;)' – kangax

W JavaScript, w jaki sposób mogę zamienić tekst na stronie HTML bez wpływu na znaczniki?

Odpowiedz

Powiązane problemy