2017-07-20 2 views
1

Ich möchte damit beginnen zu sagen, ich bin sehr sehr neu zu Javascript, und im Grunde eine Menge googeln, um diesen Ort und verschiedene andere Ressourcen zu finden. Während ich gefunden habe, dass ein Skript in etwas geändert werden soll, das ich wollte (und es geschafft hat, es zum Laufen zu bringen), stört es alle Verbindungen, die innerhalb des angegebenen div gemacht werden. Gibt es eine Möglichkeit, die Links aus dem Javascript auszuschließen, und nur das Javascript den Text beeinflussen?Ohne Links von Javascript

Dies ist das Javascript. Während ich kein Problem habe, den ersten Teil zum Funktionieren zu bringen (wo ich zitierten Text ersetze), kann ich nicht scheinen, Verbindungen und Bilder auszuschließen, die html haben, das Anführungszeichen in ihnen besitzt.

$("div.gam-posttem div").each(function(){ 
    this.innerHTML = this.innerHTML.replace(/\"([^\"]+)\"/g, 
     '<div class="gam-quotetext">"$1"</div>'); 
}); 
$not('div.gam-posttem > div > a').each(function(){}); 

Und hier ist die HTML, die ich benutze.

Jede Hilfe wird sehr geschätzt, und wenn Sie weitere Informationen wie CSS benötigen, zögern Sie nicht zu fragen.

+0

was genau wollen Sie das Javascript mit Links zu tun? – Vedant

+0

Kann in der Lage sein, Regex zu aktualisieren, um Text innerhalb von Tags zu vermeiden, ansonsten benutze die innere Schleife, um Tags zu überspringen – Bug

Antwort

0

Was dies besonders schwierig macht, ist, dass JavaScript Regular Expressions kein Look-Behind zulässt. Was Sie tun möchten, ist versuchen, "Paare, wo es eine gleiche Anzahl von < und> Zeichen (außerhalb von anderen" Zeichen) vor ihm übereinstimmen. Und selbst wenn Sie könnten, dass eine ziemlich hässlichen Regex würde ...

aber Sie kümmern sich nur um Zeichen außerhalb von <> Paare, die passende Regex mit (während nicht ratsam) ist möglich: <(?:[^><\"\']*?(?:([\"\']).*?\1)?[^><\'\"]*?)+(?:>|$) wird passe alle <> Paare an und ignoriere enge spitze Klammern in Anführungszeichen innerhalb des Tags. Daher möchten Sie alles außerhalb dieser Tags übereinstimmen.

Wahrscheinlich gibt es einen besseren Weg, dies zu tun, aber Sie können die folgende Idee versuchen:

  1. Spiel Alle Tags
  2. Für jeden Tag, erhalten die Startposition und Länge => berechnen Position Ende
  3. fügen Sie den Startindex der Zeichenfolge an der Vorderseite der Endpositionen
  4. die Länge der Zeichenfolge, die für jeden
  5. Positionen Start hinzufügen (Ende, Start) Paar (wie wir die Spiele sind invertiert), führen Sie Ihre Ersetzen Sie die Methode und ändern Sie die Zeichenfolge.

String.prototype.spliceish = function(start, end, newSubStr) { 
 
    return this.slice(0, start) + newSubStr + this.slice(end); 
 
}; 
 

 
var tagMatch = /<(?:[^><\"\']*?(?:([\"\']).*?\1)?[^><\'\"]*?)+(?:>|$)/g; 
 
var tokenMatch = /\"([^\"]+)\"/g; 
 

 
function invertedMatch(htmlString) { 
 
\t var returnString = htmlString; 
 
\t var startIndexes = [], 
 
    \t lengths = [], 
 
    match = tagMatch.exec(htmlString); 
 
    while(match !== null) 
 
    { 
 
    \t startIndexes.push(match.index); 
 
    lengths.push(match[0].length); 
 
    match = tagMatch.exec(htmlString); 
 
    } 
 
    
 
    var endIndexes = startIndexes.map(function(val, ix) { return val + lengths[ix]; }); 
 
    var invertedStarts = [0].concat(endIndexes); // we are inverting, so capture start text. 
 
    var invertedEnds = startIndexes.concat(htmlString.length); 
 
    
 
    // will need to go backwards 
 
    for(var i = invertedStarts.length - 1; i >= 0; i--) { 
 
    \t var start = invertedStarts[i], 
 
    \t end = invertedEnds[i]; 
 
    \t var stringReplace = htmlString.substring(start, end); 
 
    returnString = returnString.spliceish(start, end, stringReplace.replace(tokenMatch, 
 
    \t '<div class="gam-quotetext">"$1"</div>')); 
 
    }; 
 
    
 
    return returnString; 
 
} 
 

 
$("#root").html(invertedMatch($("#root").html()));
.gam-quotetext{ 
 
    color: green 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="root"> 
 
    <div class="gam-posttem"> 
 
    <div class="gam-posttem1"> 
 

 
    "quote here" and regular text here. "more quote here" 
 

 
    <br> 
 
    <br> 
 
    <a href="http://www.google.com">Link is Here</a> 
 

 
    </div> 
 
    </div> 
 
</div>

+0

Vielen Dank! Obwohl ich das perfekt in JSFiddle und so weiter umsetzen kann, kann ich es auf meiner Seite, die ein Jcink-Forum ist, nicht funktionieren lassen. Umschlinge ich das Javascript in einfache