replace() gibt unerwartete Ergebnisse

Question

Ich versuche ein Skript zu schreiben, das alle Links von clyp findet, einer Audio-Clip-Site. Ich bin ziemlich unerfahren in js, also vergib mir, wenn mein Code schrecklich ist.

In meinem Beispiel, egal was ich tue, kann ich nicht die 'Code' Variable, um etwas zurückzugeben, obwohl es die gleiche genaue Syntax wie die 'ersetzen' Variable ist. Hier

ist das, was ich bisher:

Körper:

<div class="body"><a href="https://clyp.it/mo3nehzm" rel="nofollow" target="_blank">https://clyp.it/mo3nehzm</a></div> 

js:

function clyp() { 
var length = document.getElementsByClassName("body").length 
for (i = 0; i < length; i++) { 
    var body = document.getElementsByClassName("body")[i]; 
    var body2 = body.innerHTML; 
    var code = body2.replace(/([>])(https:\/\/clyp.it\/)([\w]{8})/, "$3"); 
    var replace = body2.replace(/([>])(https:\/\/clyp.it\/)([\w]{8})/, "$1$2$3"); 
    body.innerHTML = replace.concat(code); 
} 
} 
clyp(); 

Geige:

https://jsfiddle.net/mzrt/8zmuktey/

Dies ist nicht das Endprodukt. Die letzte Zeile in der js dient nur dazu, zu zeigen, dass der "Code" nichts zurückgibt.

Vielen Dank für das Lesen und für Ihre Hilfe.

Answer 1

Ihre Anweisung ersetzen, die den variablen Code erzeugt wird, fallen die ">", dass die Anker-Tag schließt. Es sollte wie folgt aussehen:

var code = body2.replace(/([>])(https:\/\/clyp.it\/)([\w]{8})/, "$1$3") 

Answer 2

Versuchen Sie folgendes:

const clyp = data => data.replace(/(<a.*?>).*?https:\/\/clyp\.it\/(.*?)(<\/a>)/g, '$1$2$3') 
 

 
const clypAll = selector => { 
 
    const selected = document.querySelectorAll(selector) 
 
    for(let i = 0; i < selected.length; i++) { 
 
     selected[i].innerHTML = clyp(selected[i].innerHTML) 
 
    } 
 
} 
 

 
clypAll('.body')

<div class="body"><a href="https://clyp.it/mo3nehzm" rel="nofollow" target="_blank">https://clyp.it/mo3nehzm</a></div>

Answer 3

Der Versuch, eine Ergebnisvariable anzuzeigen, die HTML-Tags von rendering enthält die HTML selbst ist eine schlechte Idee, es sei denn, Sie immer die Quelle-Code überprüfen möchten.

In Ihrem code Variable, Sie tatsächlich erhalten:

<a href="https://clyp.it/mo3nehzm" rel="nofollow" target="_blank"mo3nehzm</a> 

So können Sie einen HTML-Tag generieren, die nicht nur ungültig, aber empty ist, ist daher nichts gezeigt. So sehen Sie auch, dass dies der Inhalt Ihrer $3 ist, was bedeutet, dass Ihre Regex nicht übereinstimmt, wie Sie es erwarten.

Also, Sie müssen es durch $1$3 ersetzen, um gültigen HTML zu erhalten - oder verwenden Sie eine andere Regex oder anderen Ansatz überhaupt.

var code = body2.replace(/([>])(https:\/\/clyp.it\/)([\w]{8})/, "$1$3"); 

führt zu

<a href="https://clyp.it/mo3nehzm" rel="nofollow" target="_blank">mo3nehzm</a> 

Answer 4

Wenn Sie nur die letzten 8 Zeichen erhalten möchten, können Sie wie folgt vorgehen:

function clyp() { 
    var elements = document.getElementsByClassName("body"); 
    var regex = /href=.*clyp\.it\/(.*?)"/g; 
    for (i = 0; i < elements.length; i++) { 
     var innerHTML = elements[i].innerHTML; 
     var code = regex.exec(innerHTML)[1]; 
     document.body.innerHTML += code; 
    } 
} clyp(); 

https://jsfiddle.net/mzrt/8zmuktey/