Andreas Dölling: IE: Laufzeitfehler ohne erkennbaren Grund

Beitrag lesen

Hallo,

ich möchte auf einer Suchergebnisseite die Vorkommen der Suchbegriffe markieren. Dazu verpacke ich sie jeweils in ein SPAN-Element mit der Klasse "marker".

Die Suchbegriffe lese ich zunächst aus dem Eingabefeld heraus, wo sie angezeigt werden. Jeder Term ist dabei eingeschlossen in * oder ".

Nachdem ich die Suchbegriffe geordnet habe, hole ich mir nun das innerHTML der Ergebnistabelle, um dies zu manipulieren. (Der Ansatz über die Textknoten war mir hier einfach zu aufwendig.)
Ich iteriere einfach über die Suchbegriffe, trenne den Inhalt an jedem Vorkommen des Begriffs mit split() auf und füge den so erhaltenen Array per join() wieder zusammen, wobei als "Kleber" das Suchwort mit dem bereits erwähnten SPAN benutzt wird.

Soweit zu meinem Ansatz (bessere Vorschläge?).

Im Firefox läuft es problemlos und schnell.
Opera führt die Aktion an sich fehlerfrei aus, zeigt dann allerdings die Tabelle nicht mehr als Tabelle an, sondern als Fließtext.
Und der IE bricht in der Zeile tableObj.innerHTML = tmpContent; mit der schönen Meldung "Unbekannter Laufzeitfehler" ab.

Habt Ihr irgendeine Idee dazu?

Noch zwei Hinweise:

  • Der JS-Code wird nach dem onload-Event ausgeführt, d.h. alle DOM-Elemente sind da.
  • Der IE macht bis auf die letzte Zeile alles richtig, wie Testausgaben zeigten.

Hm, vielleicht ist aber mein Ansatz insgesamt schlecht, und ich sollte doch lieber über die Textknoten gehen? Mir gibt jedenfalls auch das Verhalten von Opera zu denken.

Der Code:

var inputObj = document.getElementById('search');
 var termsRegExp = new RegExp('(?:\*|")([^\*]*)(?:\*|")', 'gi');
 var sortRegExp;
 var matches;
 var searchTerms = new Array();
 var tableObj = document.getElementById('oneColumn').getElementsByTagName('table')[0];
 var contentFragments;
 var i;
 var tmpContent = '';

function termSort(a, b) {
  sortRegExp = new RegExp(b, 'i');
  if(sortRegExp.test(a)) {
   return -1;
  } else {
   return 0;
  }
 }

while(matches = termsRegExp.exec(inputObj.value)) {
  searchTerms[searchTerms.length] = matches[1];
 }

searchTerms.sort();    // first sort lexically
 searchTerms.sort(termSort);  // push words before the terms they contain (e.g. 'Arbeitssicherheit' must precede 'Arbeit')

tmpContent = tableObj.innerHTML;
 for(i=0; i<searchTerms.length; i++) {
  contentFragments = tmpContent.split(searchTerms[i]);
  tmpContent = contentFragments.join('<span class="marker">' + searchTerms[i] + '</span>');
 }
 tableObj.innerHTML = tmpContent;

Thanx und ciao,
Andreas

--
"Das Corporate Design für das Internet sieht eine Reihe von Grafikelementen vor, die die Optik der Webseite visuell und funktionell beeinflussen." - (Zitat aus dem "Styleguide Corporate Design"  eines großen Konzerns...)