Ergebnis 1 bis 6 von 6
  1. #1
    Avatar von bosko
    bosko ist offline Eroberer
    registriert
    04-12-2011
    Beiträge
    72

    Suchfunktion erweitern

    Guten Morgen,

    ich habe diesen Code im Netz gefunden, für eine Suchfunktion eines Textes in einer DIV auf der HP,
    gefällt mir ganz gut aber möchte diesen erweitern:
    HTML-Code:
    jQuery.fn.highlight = function(pat) {
     function innerHighlight(node, pat) {
      var skip = 0;
      if (node.nodeType == 3) {
       var pos = node.data.toUpperCase().indexOf(pat);
       if (pos >= 0) {
        var spannode = document.createElement('span');
        spannode.className = 'highlight';
        var middlebit = node.splitText(pos);
        var endbit = middlebit.splitText(pat.length);
        var middleclone = middlebit.cloneNode(true);
        spannode.appendChild(middleclone);
        middlebit.parentNode.replaceChild(spannode, middlebit);
        skip = 1;
       }
      }
      else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
       for (var i = 0; i < node.childNodes.length; ++i) {
        i += innerHighlight(node.childNodes[i], pat);
       }
      }
      return skip;
     }
     return this.each(function() {
      innerHighlight(this, pat.toUpperCase());
     });
    };
    
    jQuery.fn.removeHighlight = function() {
     function newNormalize(node) {
        for (var i = 0, children = node.childNodes, nodeCount = children.length; i < nodeCount; i++) {
            var child = children[i];
            if (child.nodeType == 1) {
                newNormalize(child);
                continue;
            }
            if (child.nodeType != 3) { continue; }
            var next = child.nextSibling;
            if (next == null || next.nodeType != 3) { continue; }
            var combined_text = child.nodeValue + next.nodeValue;
            new_node = node.ownerDocument.createTextNode(combined_text);
            node.insertBefore(new_node, child);
            node.removeChild(child);
            node.removeChild(next);
            i--;
            nodeCount--;
        }
     }
    
     return this.find("span.highlight").each(function() {
        var thisParent = this.parentNode;
        thisParent.replaceChild(this.firstChild, this);
        newNormalize(thisParent);
     }).end();
    };
    HTML-Code:
    $(function() {
        $('#code-search').bind('keyup change', function(ev) {
            var searchTerm = $(this).val();
            $('#code').removeHighlight();
            if(searchTerm) {
                $('#code').highlight( searchTerm );
            }
        });
    });
    Würder gern das einfügen das er mir ausgibt, wie oft ein Wort gefunden wurde und wenn es möglich ist,
    eine Art Pfeilsystem das man zum gesuchten Wort Springen kann und weiter Springen und ....


    Gruß

  2. #2
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.637

    AW: Suchfunktion erweitern

    Was ist denn die Frage?
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  3. #3
    Avatar von bosko
    bosko ist offline Eroberer
    registriert
    04-12-2011
    Beiträge
    72

    AW: Suchfunktion erweitern

    Guten Morgen,

    ich habe den Code von ober erstmal verworfen und dies nun so umgesetzt:
    HTML-Code:
    function f_mark(p_value)
    {
    // Alten Inhalt auslesen
    var v_content = document.getElementById('content');
    var v_number = document.getElementById('num');
    var v_old = v_content.innerHTML;
    var number = 0;
    
    var v_pattern = new RegExp('<span class="highlight" id="([^<]*)">([^<]*)</span>', 'gi');
    var v_new = v_old.replace(v_pattern, '$2');
    
    if (p_value != '' && p_value.length > 1) {
        v_pattern = new RegExp('(' + p_value + ')', 'gi');
        v_new.replace(v_pattern, function() {
        number++;
        });    
    v_new = v_new.replace(v_pattern, '<span class="highlight" id="ju_'+number+'">$1</span>');
        
    } else {
        number = "Bitte geben Sie min 2 Zeichen ein.";
    }
    
    v_content.innerHTML = v_new;
    v_number.innerHTML = number;
    }
    Soweit alles schick und schön, gesuchter Begriff wird nun im Text Markiert und auch ausgegeben wo oft der
    gesuchte Begriff auftaucht...
    Nun will ich das ein Botton gibt, wo ich zu jedem Markierten Begriff Springen kann, vorgestellt habe ich es mir so:
    HTML-Code:
    $(".weiter").click(function() {
          var previous;
          previous = $(this).parent().prev().find(".highlight");
           $('html,body').animate({ scrollTop: previous.offset().top
                }, 1000);
    });
    Leider passiert hier nix...

    - - - Aktualisiert - - -

    Was ich noch hinzufügen muss ist das ich beim RegExp ein Fehler drin habe,
    RegExp soll alle Worte und Zeichen ausschliessen die zwischen < und > stehen
    also html tag's, wie ist das der Code?

  4. #4
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.637

    AW: Suchfunktion erweitern

    Ist das was du bauen willst das selbe wie bei der Browsersuche?
    STRG + F - Suchbegriff eingeben - Fundstellen werden gelb - mit F3 zum nächsten springen.
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  5. #5
    Avatar von bosko
    bosko ist offline Eroberer
    registriert
    04-12-2011
    Beiträge
    72

    AW: Suchfunktion erweitern

    Guten morgen,
    Jap aber mobile Geräte habe leider keine suche..
    Bei meiner Seite soll es auch nur ein bestimmten DIV durchsucht werden aber der enthält wieder rum auch HTML Tag die nicjt durchsucht werden soll

  6. #6
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.637

    AW: Suchfunktion erweitern

    Würde ich mir auf jeden Fall etwas Fertiges suchen. Denn Quellcode nach Quellcode abzusuchen kann eigentlich nur schief gehen

    Und prinzipiell könnte man vielleicht mit einer Schleife zeichenweise durch das div laufen und immer bei Beginn von HTML Quellcode ein Flag "nichts gelb machen" setzen und bei Quellcodeende wieder löschen. Und wenn das Flag nicht gesetzt ist wendest du deinen Gelb-mach-Code an.
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

Ähnliche Themen

  1. Suchfunktion
    Von ChristineH im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 09-12-2009, 14:12
  2. Suchfunktion
    Von MDS im Forum JavaScript
    Antworten: 5
    Letzter Beitrag: 05-01-2003, 14:10
  3. Suchfunktion
    Von Klark im Forum Serverseitige Programmierung
    Antworten: 6
    Letzter Beitrag: 27-08-2001, 17:20
  4. Counter- und Suchfunktion
    Von McRay im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 12-12-2000, 15:25

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •