Die besten Möglichkeiten, um einen Text auf einer HTML-Seite zu transformieren

Question

Ich muss einige Wörter auf einer HTML-Seite mit Links ersetzen, d. H. "Verknüpfen" diese Wörter. Ich habe ein Array von Identifier Deskriptoren, wie folgt aus:

var symbols_desc = [ 
    { 
     id: 'id_one', 
     name: 'struct my_struct_one', 
    }, 
    { 
     id: 'id_two', 
     name: 'my_name_two', 
    }, 
    /* ... */ 
    ] 

So in bestimmten Bereichen der HTML-Seite, die ich alle Vorkommen von struct my_struct_one zu <a href="#id_one">struct my_struct_one</a> zu transformieren müssen, usw.

Ich bin kein Experte in der Web-Feld verwende ich also wohl den dümmsten Weg: Ich aktualisiere HTML mittels jQuery. So:

$(document).ready(function() { 
    $(".some-class1, .some-class2").each(function() { 
    var o = $(this); 

    symbols_desc.forEach(function(desc){ 

     o.html(
     o.html().replace(
      new RegExp('(\\b' + desc.name + '\\b)', 'g'), 
      '<a class="symb-link" href="#' + desc.id + '">$1</a>' 
     ) 
    ); 
    }); 

    }); 
}); 

Es funktioniert, aber es ist inakzeptabel langsam. Es gibt ungefähr 70 Bezeichner, die HTML-Seite ist ungefähr 200 KB und es dauert ungefähr 5 Sekunden.

Angesichts der Komplexität und der Großartigkeit einiger Webanwendungen, die ich von Zeit zu Zeit verwende, bin ich mir sicher, dass es bessere Möglichkeiten geben sollte, diese einfache Aufgabe auszuführen. Ich würde mich freuen, deine Vorschläge zu hören.

Answer 1

In Ihrem Fall denke ich, alles, was wir tun müssen, ist bequem forEach zu einfachen for zu ändern und mehr Variablen verwenden, so versuchen Sie es:

$(".some-class1, .some-class2").each(function() { 
    var html = $(this).html(); 

    for (var i = 0; i < symbols_desc.length; i++) { 
     html.replace(
      new RegExp('(\\b' + symbols_desc[i].name + '\\b)', 'g'), 
      '<a class="symb-link" href="#' + symbols_desc[i].id + '">$1</a>' 
     ); 
    } 

    $(this).html(html); 
}); 

Answer 2

First off, keine Notwendigkeit, jQuery zu verwenden. Es trägt wahrscheinlich dazu bei, alles zu verlangsamen. Holen Sie sich Ihre HTML-Bereiche von

var fooElements = document.querySelectorAll('.someclass1, .someclass2')

mit diesem einen Nodelist zurückgibt, und Array wie Objekt, das kann ein normales for geschleift werden.

Auch Ihr Wörterbuch muss kein Array sein.

var symbols_desc = { 
    'id_one' : 'struct my_struct_one', 
    'id_two' : 'my_name_two' 
} 

Jetzt können wir eine Regex müssen alles in einem Rutsch per html-Element ersetzen Sie arbeiten möchten, statt n * m mal von looping

var fooRegex = new RegExp(Object.keys(symbols_desc).join("|"),"gi"); 

Alles, was bleibt, ist die tatsächliche zu tun

arbeiten

for(var i = 0; i < fooElements.length; i++){ 
    fooElements[i].innerHTML = fooElements[i].innerHTML.replace(fooRegex,function(matchedString){ 
    return mapObj[matchedString.toLowerCase()]; 
    }); 
} 

Arbeitsbeispiel, sollte es ziemlich schnell sein:

var dictionary = { 
 
    'mouse': 'cat', 
 
    'dog': 'mouse', 
 
    'horse': 'dog', 
 
    'cat': 'horse' 
 
} 
 

 
var fooElements = document.querySelectorAll('.some-class1, .some-class2'); 
 

 
var fooRegex = new RegExp(Object.keys(dictionary).join("|"), "gi"); 
 

 
for (var i = 0; i < fooElements.length; i++) { 
 
    fooElements[i].innerHTML = fooElements[i].innerHTML.replace(fooRegex, function(matchedString) { 
 
    return dictionary[matchedString.toLowerCase()]; 
 
    }); 
 
}

<div class="some-class1"> 
 
    Dog, cat, mouse 
 
</div> 
 

 
<div class="some-class2"> 
 
    Horse, cat, dog 
 
</div>