Suche ohne HTML Steuerzeichen zu berücksichtigen

Conny64 · 7. März 2019

Hi,

ich habe ein kleines Script welches mir in einer HTML Seite den Suchbegriff markiert.

Allerings habe ich das Problem, dass es auch die HTML Befehle sucht und markiert. Dadurch gerät die Anzeige durcheinander.

Was müsste ich denn ändern, dass die HTML Commandos nicht mit durchsucht werden ?

Code

<style type="text/css">
.mark {
 background-color: #f00;
 font-weight:  bold;
 color:   #fff;}
</style>

<script type="text/javascript">
function f_mark(p_value)
{
 // Alten Inhalt auslesen
 var v_content = document.getElementById('content_search');
 var v_old = v_content.innerHTML;

 // Erstmal evtl. vorhandene alte Markierungen entfernen
 var v_pattern = new RegExp('<span class="mark">([^<]*)</span>', 'gi');
 var v_new = v_old.replace(v_pattern, '$1');

 if (p_value != '')
 {
    v_pattern  = new RegExp('(' + p_value + ')', 'gi');
    v_new   = v_new.replace(v_pattern, '<span class="mark">$1</span>');
 }

 // Neuen Inhalt setzen
 v_content.innerHTML = v_new;
}

</script>

<input type="text" onKeyUp="f_mark(this.value)" />

<div id="content_search" >
<ul>
 <li>Karl Klapp</li>
 <li>Hans Schranz</li>
 <li>Karl Napf</li>
 <li>Peter Meier</li>
 <li>Hans Mayer</li>
 <li>Guido Petersen</li>
 <li>Ingo Hansen</li>
 <li>Eduard Karlsson</li>
</ul>
</div>

Alles anzeigen

Wenn ich jetzt nach KARL suche ist alles gut

Suche ich nach UL dann wird das HTML <UL> angezeigt was eigentlich nicht sein sollte.

Es zerstört die Anzeige.

Leider bin ich noch Anfängerin.

basti1012 · 8. März 2019

In deinen Fall könnte das klappen

tausche das

JavaScript

var v_old = v_content.innerHTML;

mit das

JavaScript

var v_old = v_content.textContent;

Conny64 · 8. März 2019

Sorry, das hat nicht ganz geholfen

hast du noch eine Idee?

Bin selbst zu doof das mit JsFiddle hinzubekommen

https://jsfiddle.net/Conny64/ybwnu506/12/

basti1012 · 8. März 2019

Warum nicht ? In mein Beispiel hat es geklappt ? Was passiert den da jetzt ,oder was geht nicht ? Hast du das schon online ?

Conny64 · 8. März 2019

Habs jetzt mit JsFiddle mal online gesetzt, damit man damit spielen kann.

Dadurch werden dann auch bei der Anzeige die HTML Zeichen rausgenommen und alles erscheint unformatiert.

basti1012 · 8. März 2019

achso. Es soll formatiert bleiben aber trotzdem kein Code angezeigt werden ?

Dann wird es meines wissens etwas schwerer. Bzw wenn ees nur in den Bereich sein soll wo <ul> und <li> ist dann häte ich nee idee.

Soll die suche aber auf einer kompletten html Seite laufen dann wird mir das zu schwer.

Aber in dein Beispiel Code ,in den paar Zeilen könnte man es mit regulären Ausdrücken versuchen ,oder <li> und <ul> ausschliesen ( zb durch repleace oder so ) in der suche .

Ich muss das mal gerade selber testen ob das geht wie ich das denke

Conny64 · 8. März 2019

Hi, danke das ist lieb von dir, aber wenn sollte es so sein, dass alle HTML Tags ignoriert werden.

Meinst du man kann damit was anfangen

http://jsfiddle.net/tkm5696w/

oder noch besser das hier:

http://jsfiddle.net/xeSQb/6/

Sempervivum · 8. März 2019

Da muss man wohl alle Textnodes heraus suchen und für jeden die Markierung, wie Du es schon hast, durchführen. Am einfachsten geht das mit jQuery:

https://stackoverflow.com/ques…ct-text-nodes-with-jquery

basti1012 · 8. März 2019

mit ihren letzten fiddle geht es mit etwas fummeln auch recht gut.

Hätte ich auch nicht gedacht das es doch so kompliziert ist den text zu makieren ohne die Formatierung zu zerstören.

Aber mit Javascript ist ja fast alles möglich

Conny64 · 8. März 2019

Da ich mit JS noch komplett am Anfang stehe würde ich mich freuen wenn du mir dabei etwas unter die Arme greifen könntest.

Habe da jetzt schon Stunden zugebracht, bekomme es aber irgendwie überhaupt nicht hin.

Es soll so funktioieren wie in meinem ersten Fiddle nur halt ohne HTML Tags zu berücksichtigen.

Sempervivum · 8. März 2019

Ganz so einfach, wie ich dachte, war es nicht, aber ich habe mal eine grobe Demo gemacht. Was noch fehlt ist das Rückgängigmachen wenn man eine erneute Suche startet.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Text hervorheben</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://use.fontawesome.com/e34d8d1dc9.js"></script>
    <style>
        .mark {
            background-color: lightblue;
        }
    </style>
</head>

<body>

    <label for="searchinput"><i class="fa fa-search" aria-hidden="true"></i><span class="sr-only">Search
            FAQ</span></label>
    <input id="searchinput" class="form-control input-lg" placeholder="Search FAQ" autocomplete="off" spellcheck="false"
        autocorrect="off" tabindex="1">
    <div id="content">
        <ul>
            <li>Karl Klapp</li>
            <li>Hans Schranz</li>
            <li>Karl Napf</li>
            <li>Peter Meier</li>
            <li>Hans Mayer</li>
            <li>Guido Petersen</li>
            <li>Ingo Hansen</li>
            <li>Eduard Karlsson</li>
        </ul>
    </div>
    <script>
        $("#searchinput").on("change", function () {
            $("#content").find(":not(iframe)").addBack().contents().filter(function () {
                return this.nodeType == 3;
            }).each(function (idx, ele) {
                if ($(ele).text().indexOf($("#searchinput").val()) != -1) {
                    var newHTML = $(ele).text().replace($("#searchinput").val(), '<span class="mark">' + $("#searchinput").val() + '</span>');
                    $(ele).replaceWith("<span>" + newHTML + "</span>");
                }
            });
        });
    </script>
</body>

</html>

Alles anzeigen

Conny64 · 8. März 2019

Hi,

vielen Dank für deine tolle Bemühungen. Da ich leider noch nicht ganz damit zurecht kam habe folgenden Code gefunden,

der für mich funktioniert.

HTML

<!DOCTYPE html>

    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Fenstertitel</title>
    <style type="text/css">
    #toSearch {
        position: relative;
    }
    .marker {
        position: absolute;
        background-color: red;
        display: inline-block;
        z-index: -1;
    }
    .marker.marked {
        background-color: lightblue;
    }
    </style>
    </head>
    <body>
    <input id="search"><button id="next">next</button>
    <div id="toSearch">Lorem ipsum dol<span>or sit amet<b> (in span)</b>, conset</span>etur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>

    <script type="text/javascript">
    function getSearchRanges(node, search){
        var ranges = [];
        var offsets = [];
        var pos = -1 * search.length;
        var value = node.textContent.toLowerCase();
        search = search.toLowerCase();
        while ((pos = value.indexOf(search, pos + search.length)) > -1){
            offsets.push(pos);
        }
        var textNodes = [];
        var lastOffset = 0;
        function traverse(node){
            if (node.nodeType === 3){
                textNodes.push({
                    node: node,
                    start: lastOffset,
                    end: lastOffset + node.nodeValue.length
                });
                lastOffset += node.nodeValue.length;
            }
            else {
                for (var i = 0; i < node.childNodes.length; i += 1){
                    traverse(node.childNodes[i]);
                }
            }
        }
        traverse(node);
        function getTextNodeByOffset(offset){
            for (var i = 0; i < textNodes.length; i += 1){
                if (textNodes[i].start <= offset && textNodes[i].end >= offset){
                    return {
                        node: textNodes[i].node,
                        offset: offset - textNodes[i].start
                    };
                }
            }
            console.error("offset not found:", offset);
        }
        return offsets.map(function(offset){
            var range = document.createRange();
            var start = getTextNodeByOffset(offset);console.log(start);
            range.setStart(start.node, start.offset);
            var end = getTextNodeByOffset(offset + search.length);
            range.setEnd(end.node, end.offset);
            return range;
        });
    }
    function createMarkerFromRect(rect, referenceRect){
        var marker = document.createElement("span");
        marker.className = "marker";
        marker.style.height = rect.height + "px";
        marker.style.width = rect.width + "px";
        marker.style.top = (rect.top - referenceRect.top) + "px";
        marker.style.left = (rect.left - referenceRect.left) + "px";
        return marker;
        
    }
    function createMarkersFromRange(range, referenceRect){
        return Array.from(range.getClientRects()).map(function(rect){
            return createMarkerFromRect(rect, referenceRect);
        });
    }
    function search(search){
        Array.from(document.querySelectorAll(".marker")).forEach(function(marker){
            marker.parentNode.removeChild(marker);
        });
        if (search){
            var toSearch = document.getElementById("toSearch");
            var referenceRect = toSearch.getBoundingClientRect();
            var firstMarker = true;
            getSearchRanges(toSearch, search).forEach(function(range){
                createMarkersFromRange(range, referenceRect).forEach(function(marker){
                    marker.range = range;
                    if (firstMarker){
                        marker.classList.add("marked");
                    }
                    toSearch.appendChild(marker);
                });
                firstMarker = false;
            });
        }
    }
    document.getElementById("search").addEventListener("input", function(){
        search(this.value);
    })
    window.addEventListener("resize", function(){
        search(document.getElementById("search").value);
    });
    document.getElementById("next").addEventListener("click", function(){
        var markers = Array.from(document.getElementById("toSearch").querySelectorAll(".marker"));
        function unmark(range){
            markers
                .filter(function(marker){
                    return marker.range === range;
                })
                .forEach(function(marker){
                    marker.classList.remove("marked");
                });
        }
        function mark(range){
            markers
                .filter(function(marker){
                    return marker.range === range;
                })
                .forEach(function(marker){
                    marker.classList.add("marked");
                });
            
        }
        var foundRange = false;
        markers.forEach(function(marker, i){
            if (foundRange === false){
                if (marker.classList.contains("marked")){
                    foundRange = marker.range;
                    unmark(foundRange);
                }
            }
            else {
                if (foundRange !== true && foundRange !== marker.range){
                    mark(marker.range);
                    foundRange = true;
                }
            }
        });
        if (foundRange !== true){
            mark(markers[0].range);
        }
    });
    </script>
    </body>
    </html>

Alles anzeigen

Siehe https://jsfiddle.net/Conny64/ytesr1j9/1/

Sempervivum · 8. März 2019

Wahnsinn, auch ein interessanter Ansatz! Ist aber ganz schön lang der Code.

Arne Drews · 10. März 2019

Also wenn ich mir das fiddle ansehe, wäre das hier das selbe Verhalten, nur deutlich schlanker und IE tauglich:

JavaScript

var _txtContainer = document.querySelector( '#toSearch' );
var _txtOriginal = _txtContainer.innerHTML;
var _offset = 0;

document.querySelector( '#search' ).addEventListener( 'input', function(e) {

  _offset = 0;
  _txtContainer.innerHTML = _txtOriginal;
  _searchFor = this.value.toString().trim();

  if ( _searchFor.length == 0 )
    retrun;

  rx = new RegExp( '(?<=[^\<])(' + _searchFor + ')(?!\>)', 'ig' );
  _txtContainer.innerHTML = _txtOriginal.replace( rx, '<span class="marked">$1</span>' );

});


document.querySelector( '#next' ).addEventListener( 'click', function(e) {
  
  _matches = document.querySelectorAll( '.marked' );
  
  for ( i=0; i<_matches.length; i++ )
    _matches[i].classList.remove( 'highlight' );

  if ( _offset >= _matches.length )
    _offset = 0;
  
    _matches[_offset++].classList.add( 'highlight' );
  
});

Alles anzeigen

CSS

.marked { background:#cce; color:#fff; }
.marked.highlight { background:#e00; color:#fff; }

zum Ausprobieren: https://codepen.io/anon/pen/eXEZZa?editors=1010

basti1012 · 11. März 2019

Auch ein guter Ansatz aber funktioniert leider nicht so ganz wie sie das haben will.

Wenn man in der Suche ein 'a' oder '<' ein tippt wird das auch angezeigt.

Auch wenn man da noch und mit class="" reinmacht wird das auch markiert.

Das wollte sie ja gerade nicht und die Formatierung soll so bleiben wie sie ist , also mit Zeilenumbruch und so weiter.

Das funktioniert,

https://basti1012.bplaced.net/…rdner=html-seminar&id=351

genauso wie sie es eigentlich wollte, doch ich finde das ist eine Pfusch-Lösung weil jede negative Auswirkung

mit einem Gegencode ('hole(), focus() ) ausgeglichen wird.

Arne Drews · 11. März 2019

Zitat von basti1012

Wenn man in der Suche ein 'a' oder '<' ein tippt wird das auch angezeigt.

Auch wenn man da noch und mit class="" rein macht wird das auch makiert.

Naja, ich habe wenig Lust, da noch rumzufeilen, aber ich bin mir ziemlich sicher, dass das mit wenig Modifikation an dem RegEx-Pattern und/oder ein zwei Zeilen mehr lösbar ist. Bleibt dann immer noch übersichtlicher und deutlich kompakter.

Zitat von basti1012

Das wolltw sie ja gerade nicht und die Formatierung soll so bleiben wie sie ist , also mit Zeilenumbruch und so weiter.

An welcher Stelle passiert was mit Zeilenumbrüchen?

basti1012 · 11. März 2019

wenn du zb ein mit background:color rein machst und dann "<" in der suche eintippst ,ist die ganze formatierung weg.

Das p macht keinen Absatz und das background:color geht auch nicht weg.

Aber wie du schon sagtest, wollte ich das am Anfang auch mit regex versuchen, doch das ist ein Thema was ich noch gar nicht behersche.

Wenn man mit Regex den ganzen Code ausschließen kann beim suchen und markieren, dürfte die Formatierung ja eigentlich nicht mehr zerschossen werden oder ?

Das hauptproblem beim zerschießen der Formatierung ist ja das man das gefundene mit einen umgibt .

Wenn er dann ein "la" makieren muss würde das

Code

<p class="test">lampe</p>

ja dann so aussehen

Code

<p c<span class="mark">$s</span>ss="test"><span class="mark">$s</span>mpe</p>

Also müsste man doch theoretisch nur das makieren innerhalb der < > dieser Zeichen verbieten. Oder sehe ich das jetzt Falsch ?=??

Arne Drews · 11. März 2019

Nö, siehst Du eigentlich richtig. Ein wenig rumspielen mit der Variante muss man wohl.

Den Weg über den designMode finde ich grundlegend zwar auch charmant, aber Du schließt schon mal bei der Verwendung von find() den IE komplett aus ( inkl. Edge ). Natürlich gibt es dazu wieder ein Polyfill, aber das bläht es am Ende nur unnütz auf, weil es M$ wieder mal anders macht.

Suche ohne HTML Steuerzeichen zu berücksichtigen

Jetzt mitmachen!

Teilen