js replace functie

[Verwijderd]

Ik wil graag wat woorden replacen door ze te laten opvallen.

Als voorbeeld de onderstaande woordjes:

code:

            te simpel<br />
            ik-sim-nu<br />
            welsim<br />
            Simplify<br />
            sim-card<br />
            sim<br />

Nu moet hij alle sim veranderen maar niet wanneer er een [a-zA-Z] voor of achter staat.
in feite in dit geval alleen:
ik-sim-nu
sim-card
sim

die andere mogen niet.

nu heb ik dit en dat werkt alleen voor erna, maar ervoor werkt niet, of hij laat tekens weg of hij marked niets.

code:

    var P = document.getElementById('content');  
    var R = new RegExp("(sim)(?![a-zA-Z])","ig");
    
    P.innerHTML = P.innerHTML.replace(R,"<span style=\"background-color: green\">sim</span>");

[MueR]

Je krijgt vast een foutmelding of andere nuttige hints uit debuggen?

[Verwijderd]

krijg helaas geen foutmeldingen, hij doet het gewoon niet zoals ik het graag zie....

en hoe kan je deze het best debuggen dan?
zovaak heb ik nog geen reguliere expressies gemaakt...

[MueR]

Je zou eens kunnen kijken of hij uberhaupt ergens op matcht (via alert oid).

[crisp]

Javascript kent inderdaad geen look-behind, dus je zal zoiets moeten doen:

JavaScript:

var P = document.getElementById('content');  
var R = /([^a-z]|^)(sim)(?![a-z])/ig;

P.innerHTML = P.innerHTML.replace(R, '$1<span style="background-color:green">$2<\/span>');

Let trouwens op met dit soort dingen dat je geen HTML-tags vernaggelt.

[ Voor 12% gewijzigd door crisp op 26-05-2010 15:04 ]

[Juup]

Je kunt ook iets als

JavaScript:

text.replace(/(\W)sim(\W)/ig, "$1<span>sim</span>$2");

doen.

edit: wat crisp zegt.

[ Voor 10% gewijzigd door Juup op 26-05-2010 15:05 ]

[crisp]

Juup schreef op woensdag 26 mei 2010 @ 15:05:
Je kunt ook iets als

JavaScript:

text.replace(/(\W)sim(\W)/ig, "$1<span>sim</span>$2");

doen.

edit: wat crisp zegt.

\W matched ook getallen en de underscore, en matched juist weer niet het begin van het subject. Als het eerste geen probleem is dan kan je beter \b (word-boundary) gebruiken:

JavaScript:

text.replace(/\b(sim)\b/ig, "<span>$1</span>");

[Verwijderd]

hoi

bedankt voor de reacties, ik heb hem nu idd werkend.
maar zoals al opgemerkt is, in de html gaat het nog fout.....

dat punt moet ik nog oplossen dus.....

ik denk niet dat daar een 'overal function' voor is die dat ineens kan negeren he?

[BtM909]

in de html gaat het nog fout....

Nog enig idee wat er fout gaat? Ik snap wel wat je bedoelt en wat er mis gaat (zie o.a. opmerking van crisp), maar het is in dit soort situaties gewoon verstandiger om wat uitgebreider te reageren: wat gaat er mis; geef eens code voorbeelden van wat je hebt en hebt geprobeerd

[Verwijderd]

Ik ben nu een tijdje bezig geweest met de reguliere expressie om de woorden te vervangen.

Dit ging op een bepaald moment steeds beter. Alleen toen was het dus het probleem dat hij ook gewoon html omschreef.

bv a href="woord" dan werd woord uit de link ook gewoon vervangen.

Nu heb ik dus een reguliere expressie die dat oplost.

Maar ik heb ook een reguliere expressie voor het eerste probleem.
Dit was bv het woord sim dat hij alleen mag markeren als het losstaat. dus niet in andere woorden als simcard.

Deze twee expressies heb ik nu. Hier moet ik er op een of andere manier een van maken.

JavaScript:

// negeren html
var R = new RegExp(">([^<]*)?("+list[i].word+")([^>]*)?<","ig");

// subwoorden niet doen
var R = new RegExp("([^a-zA-Z\"]|^)("+list[i].word+")(?![a-zA-Z\"])", 'ig')

// execute
content = content.replace(R,'>$1<span style="background-color: '+list[i].color+'">$2</span>$3<');

Mijn vraag, hoe krijg die twee R's nu in een expressie... of is dat totaal onbegonnen werk.

Blijf het enorm lastig vinden die reguliere expressies, maar ben er nu dus bijna

[crisp]

Ik zou dit zeker niet in 1 expressie doen, maar met een 'outer' expressie die alleen content doorpast naar een 'inner' expressie (mbv een callback functie als replacement argument) die vervolgens de highlighting verzorgt.

[HuHu]

Misschien kun je de content die vervangen moet worden op een eenvoudige manier lokaliseren, zodat je er minder of geen last van hebt? Stop alle tekst die eventueel vervangen moet worden binnen een container en vervang alleen binnen die container.

Als ik zo je OP bekijk lijkt het erop dat je een lijst maakt met woorden die je highlight. Je zou dan alleen binnen die lijst kunnen zoeken en zo voorkomen dat je "bijvangst" hebt op de rest van je pagina en HTML.

[Verwijderd]

Ik heb een firefox extensie gemaakt die eigenlijk de gehele webpagina moet controleren en daarin woorden markeren.

Via php maak ik van te voren een lijst zodat die lijst niet te lang gaat woorden maar alleen daadwerkelijke woorden pakt die ook gemarkeerd moeten worden.

De lijst om te markeren is nu ongeveer meer dan 250.000 woorden en gaan er per dag alleen maar meer worden. Middels php controle heb ik nu soms maar 30 woorden ofzo wat natuurlijk al enorm scheelt.

De webpagina moet echter wel volledige hetzelfde blijven.

Dus ik denk zo dat die verhalen met containers etc niet opgaan, of vergis ik mee daarin?

[Verwijderd]

crisp schreef op maandag 28 juni 2010 @ 14:25:
Ik zou dit zeker niet in 1 expressie doen, maar met een 'outer' expressie die alleen content doorpast naar een 'inner' expressie (mbv een callback functie als replacement argument) die vervolgens de highlighting verzorgt.

hmm hoe moet ik dit voor me zien.....

[crisp]

Verwijderd schreef op maandag 28 juni 2010 @ 15:09:
Ik heb een firefox extensie gemaakt die eigenlijk de gehele webpagina moet controleren en daarin woorden markeren.

Gebruik dan gewoon DOM-functies om door de hele document-tree heen te lopen en alleen textNodes te selecteren. Ik zou dan zeker geen innerHTML gebruiken vanwege de neveneffecten daarvan (ingevulde formulieren worden gereset, dynamisch wijzigingen worden teniet gedaan ectetera).

[ Voor 28% gewijzigd door crisp op 28-06-2010 15:13 ]

[Verwijderd]

maar als je dan 100 woorden heb, krijg je dan geen enorme lussen?
daar was ik een beetje bang voor

[crisp]

Verwijderd schreef op maandag 28 juni 2010 @ 15:14:
maar als je dan 100 woorden heb, krijg je dan geen enorme lussen?
daar was ik een beetje bang voor

Van 100 woorden kan je natuurlijk 1 OR'ed expressie maken.

[Verwijderd]

Ik ben nu dus druk bezig met de DOM functie zoals mij verteld werd.
Ik heb een recursieve functie gemaakt die op zoek gaat naar alle text gegevens

JavaScript:

function checkNodes(nodes)
{
    for (var i=0; i<nodes.length; i++)
    {
        if (nodes[i].nodeType == Node.TEXT_NODE)
        {
            var text = trim(nodes[i].nodeValue);
            if (!empty(text)) Firebug.Console.log(text);
        }
        
        //  check for childnodes
        if (nodes[i].hasChildNodes()) checkNodes(nodes[i].childNodes);
    }
}

Ik heb de pagina van www.is.nl er eventjes doorheen gehaald en krijg helaas ook javascript items terug en <img tags.....

Dat zijn toch geen text node's volgens mij?

Kan dit komen omdat een javascript fucntie op dit pagina dit eventueel gaat wegschrijven in een html object zoals div span etc..."

Heb al iets meer info na wat gericht zoeken in de source, ze staan in <script> of <noscript> tags... die moet ik er dus nog uitfilteren en ik ben weer een stapje verder!!!!

[ Voor 9% gewijzigd door Verwijderd op 29-06-2010 13:38 ]

[Rekcor]

Wat is de waarde van Node.TEXT_NODE?

Zie ook http://www.javascriptkit.com/domref/nodetype.shtml

Overigens, je weet dat

JavaScript:

for (var i=0; i<nodes.length; i++) 
    { 
        if (nodes[i].nodeType == Node.TEXT_NODE) 
        { 

niet heel snel uitvoerbaar is?

JavaScript:

var node, nodeLength;

nodeLength = nodes.length;
for (var i=0; i<nodeLength ; i++) 
    { 
        node=nodes[i];
        if (node.nodeType == Node.TEXT_NODE) 
        { 

is waarschijnlijk sneller...

[ Voor 69% gewijzigd door Rekcor op 29-06-2010 13:44 . Reden: Overigens... ]

[Verwijderd]

@rekcor, ja dat klopt die lus, beter is het op jouw manier te doen.

die waarde is beschreven op de volgende pagina https://developer.mozilla.org/en/nodeType

bedankt voor de tip

[Verwijderd]

crisp schreef op maandag 28 juni 2010 @ 15:18:
[...]

Van 100 woorden kan je natuurlijk 1 OR'ed expressie maken.

ik heb nu dus compleet via de DOM de teksten gevonden zoals ik ze graag wil hebben.

Nu moet ik dus in de node de data aanpassen.

Wanneer ik de nodeValue aanpassen, dan zie je precies wat ik erin schrijf. dus met <span etc...
Dit lijkt me ook logisch, maar wil ik dus eigenlijk niet.

Om nu weer 100 woorden door een lus te halen om de context te zoeken wil je ook niet volgens mij. Hierin sta ik dus eventjes vast...

Iemand enig idee?

[RobIII]

Timbo.nl: Gebruik de edit knop ( ) als je iets toe te voegen hebt; je topic herhaaldelijk omhoogschoppen is niet nodig.

Verwijderd schreef op dinsdag 29 juni 2010 @ 15:00:

Iemand enig idee?

Wat heb je zelf al verzonnen? Je kunt toch gewoon die tekst nemen en met DOM methodes nieuwe text/span/whatever-nodes toevoegen?

[ Voor 40% gewijzigd door RobIII op 29-06-2010 15:04 ]

[Verwijderd]

Sorry, was ik even vergeten.

Ik heb het geprobeerd met .innerHTML maar deze doet niets.

met .data heb ik het ook gedaan, maar deze laat ook html zien.

JavaScript:

                for(t=0; t<list.length; t++)
                {
                    var R = new RegExp("([^a-zA-Z\"]|^)("+list[t].word+")(?![a-zA-Z\"])", 'ig')
                    text = text.replace(R,'$1<span style="background-color: '+list[t].color+'">$2</span>');
                }
                nodes[i].nodeValue = text;

Dit had ik eerste gedaan, maar laat dus ook html zien. ik heb deze array even gelimiteerd op 5 stuks om te testen, maar dit kunnen er dus over de 100 worden.

[RobIII]

Verwijderd schreef op dinsdag 29 juni 2010 @ 15:06:
Ik heb het geprobeerd met .innerHTML maar deze doet niets.

crisp in "js replace functie"

Verwijderd schreef op dinsdag 29 juni 2010 @ 15:06:
met .data heb ik het ook gedaan

Want

Je kunt toch gewoon textnodes, spans en whatevers maken met createElement en die toevoegen aan de node waar je ze in wil hebben?

[ Voor 5% gewijzigd door RobIII op 29-06-2010 15:14 ]

[Verwijderd]

Ja dat klopt, zover ben ik ook.

Alleen mijn vraag is meer, hoe ga ik dat goed filteren. Stel je hebt 100+ woorden. Dan moet ik eerst controleren of 1 van de 100+ in het stukje text voorkomt. Vervolgens weten welk woord(en). Vervolgens kan je dan opzoeken waar en de node in 2 stukken verdelen en de span ertussen zetten.

Mijn vraag is meer hoe kan ik dat nu slim aanpakken. Ik moet je eerlijk zeggen dat mijn ideetjes op zijn.

Wilde het dus eerst aanpakken met de twee reguliere expressies samen voegen toch 1.
Crips vertelde me dat DOM beter was, vandaar ik nu met de DOM bezig ben.
Maar nu loop ik dus tegen dit probleem aan.

Op dit moment heb ik een array met die verschillende waarden, en kleurcode's van de woorden.
Die kan ik allemaal zo aanpassen, dus dat is geen probleem.

Mijn probleem is nu eerder hoe ik snel en handig die woorden kan filteren uit het de text.
Wanneer ik daar namelijk continu een loopje van 100+ ga herhalen gaat het niet sneller op worden natuurlijk.

Daarnaast nog iets en dat is als een van de gezochte woorden sim is dan mag hij simcard niet als gevonden woord pakken, maar sim-card weer wel.
Vandaar had ik eerst die reguliere expressie die ik gemaakt had gerund, maar goed, dat werd hem dus niet als je met nodeValue werkt.

[ Voor 12% gewijzigd door Verwijderd op 29-06-2010 15:25 ]

[Rekcor]

Dit kwam ik tegen op Grote Broer Google toen ik zocht op 'javascript highlight whole words' . Ik heb het een beetje aangepast om e.e.a. hier te laten werken.

HTML:

<html>
<body>

<script type="text/javascript">
reCache = {};
doc = document;
each = function ( obj, callback ) {
        if ( obj+'' === '[object Object]' ) {
            for ( var key in obj ) { 
                callback.call( obj, key, obj[ key ] ); 
            }
        }
        else {
            for ( var i = 0; i < obj.length; i++ ) { 
                callback.call( obj, obj[ i ], i ); 
            }
        }
    }

highlightWord = function ( node, word ) {
        // Iterate into this nodes childNodes
        if ( node.hasChildNodes ) {
            each( node.childNodes, function ( cn ) {
                highlightWord( cn, word );
            });
        }
        // And do this node itself if it's text and it hasn't already been highlighted
        if ( node.nodeType == 3 && node.parentNode.className != 'searchword' ) { 
            
            var tempNodeVal = node.nodeValue.toLowerCase(),
                tempWordVal = word.toLowerCase(),
                // Setup regex outline
                wordPatt = '\\b' + tempWordVal + '\\b',
                // Get regex from cache or create it ( and cache for re-use )
                wordPatt = reCache[ wordPatt ] = ( reCache[ wordPatt ] || new RegExp( wordPatt ) ),
                
                match = wordPatt.exec( tempNodeVal );
                
            if ( match ) {
                var pn = node.parentNode,
                    checkn = pn;
                    
                // check if we're inside a "nosearchhi" zone
                while ( checkn && checkn != doc.body ) { 
                    if ( /\bnosearchhi\b/.test( checkn.className ) ) { 
                        return; 
                    }
                    checkn = checkn.parentNode;
                }
                
                var nv = node.nodeValue,
                    ni = match.index,
                    // Create a load of replacement nodes
                    before = doc.createTextNode( nv.substr( 0, ni ) ),
                    docWordVal = nv.substr( ni, word.length ),
                    after = doc.createTextNode( nv.substr( ni + word.length ) ),
                    hiwordtext = doc.createTextNode( docWordVal ),
                    hiword = doc.createElement( 'span' );
hiword.setAttribute('style', 'background-color:red');
                hiword.className = 'searchword';
                hiword.appendChild( hiwordtext );
                pn.insertBefore( before, node );
                pn.insertBefore( hiword, node );
                pn.insertBefore( after, node );
                pn.removeChild( node );
            }
        }
    }
window.onload = function(){highlightWord(document.getElementById('myP'), 'in');}
</script>
<p id="myP">
Hoe je aan je software, muziek, foto's, films, Canal+-uitzendingen en dergelijke zaken komt moet je zelf weten. We willen echter niet dat je GoT hier op welke manier dan ook in betrekt. Buiten dat het ons problemen gaat opleveren bij de diverse controlerende instanties willen we vooral niet dat GoT uitgroeit tot een uitwisselboard voor van alles en nog wat. Het volgende willen wij dan ook niet op GoT zien:

    * Warez, cracks NO-CD patches en dergelijke.
    * MP3s/DivX'jes en dergelijke met copyrighted inhoud (incl. subtitles).
    * CD-covers.
    * Fotorapportages, uiteraard met uitzondering van rapportages die je zelf gemaakt hebt.
    * (Ster)reclames.
    * GSM-flashers.</p>

</body>
</html>

(zie http://jelly-javascript.g...vn/trunk/temp/searchhi.js)

[crisp]

Ik heb ooit ook eens een highlight functie geschreven die de DOM doorloopt. Ik heb 'm even opgepoetst en hij is hier te vinden. Deze kan ook zoeken op meerdere woorden (spatie-gescheiden), maar zoekt niet op hele woorden. Dat laatste is echter makkelijk in de expressie aan te passen. Wellicht heb je er wat aan