Parsing ein HTML-String, um

Question

Hintergrund

Ich erhalte eine HTML-Zeichenfolge, die die SRC-URL von einem Image-Tag abzurufen und zu ändern, die ich von einem Ajax-Aufruf an einen Web-api bin immer die ich erstellt. Ich habe Beispiele gesehen, die das DOM laden, aber ich arbeite mit einem String, und ich denke, dass es einen Regex-, Jquery-, Teilstring-Ansatz für mein Problem geben kann.

Frage

ich die Möglichkeit, über eine HTML-Objekt gehen müssen wird die IMG-Tags enthalten, die ich auf vordefinierte URL ändern müssen, die über eine Schaltfläche Aktion ausgelöst wird. Derzeit versuche ich einen Jquery Ansatz für dieses Problem, aber ich habe Probleme mit der Änderung der URL. Ich bekomme den HTML-Code als Zeichenfolge und ich bin Token mit ~~/picture~~ so in der Beispiel-Zeichenfolge, die ich bereitstellen werde ich ein Array von 2, die zwei verschiedene IMG-Tags enthalten. Wäre ein Regex- oder Teilstring-Ansatz effizienter, da ich diese HTML-Zeichenfolge in Token zerlege.

Beispielcode

var newUrl = "http://maps.google.com/mapfiles/kml/shapes/bus.png"; 
var imageTag = contentObject.Content.split("~~/picture~~"); 
     for (var i = 0; i < imageTag.length; i++) { 
      var checkValue = imageTag[i]; // checking the array value for accuracy 
      var testChangeSrc = $(imageTag[i]).attr("src", newUrl); 
     } 

Ausgabe des Kodex

Dieser Code nicht die HTML ändert, wie ich erwartet hatte. Von dem, was ich sehe, lädt es andere Objekte.

Beispiel String

<p>~~/Document Text~~When it comes to accounting and advisory services, is the unique firm of choice. As a trusted advisor to our clients, we bring an integrated client service approach with dedicated industry experience. respects the value of every client relationship and provides clients throughout the U.S. with an unwavering commitment to hands-on, personal attention from our partners and senior-level professionals.</p><p>~~/Document Text~~in search of a trusted advisor to deal with their state and local tax needs. Through our leading best practices and experience, our SALT professionals offer quality and ease to the client engagement. We are proud to provide highly comprehensive services.</p><p>~~/picture~~<br></p><p> 
    <img src="/sites/ContentCenter/Graphics/map-al.jpg" alt="map al" style="width&#58;611px;height&#58;262px;" />&#160;~~end~~<br></p><p><br></p><p>~~/picture~~<br></p><p> 
    <img src="/sites/ContentCenter/Graphics/Firm_Telescope_Illustration.jpg" alt="Firm_Telescope_Illustration.jpg" style="margin&#58;5px;width&#58;155px;height&#58;155px;" /> </p><p>~~end~~<br></p><p>~~/Document Heading 1~~Image Test 3<br></p> 
    <img alt="base64 test" /> 
</div><div class="ExternalClassAF0833CB235F437993D7BEE362A1A88A"><br></div><div class="ExternalClassAF0833CB235F437993D7BEE362A1A88A"><br></div><div class="ExternalClassAF0833CB235F437993D7BEE362A1A88A"><br></div> 

IntendedGoal

Mein beabsichtigtes Ziel ist es, die URL in der SRC in jedem img-Tag zu ändern. Die Beispielzeichenfolge ist das Standardformat, das von meinem Controller kommt. da ich diese Zeichenkette in Tokens bin, würde ein Teilstring-Ansatz funktionieren? oder Regex?

Answer 1

Ich fand dies der einfachste Weg, es zu tun, und auch effizienter als jQuery. Im Grunde spritzt man die Zeichenkette in ein Div und verwendet JavaScript, um die Html-Zeichenkette, die sich jetzt in einem div befindet, zu analysieren. Wenn Sie die Zeichenfolge in das Div einfügen, erhalten Sie mehr Funktionalität und Flexibilität, wenn Sie Ihrer Lösung mehr Logik/Filter hinzufügen möchten. Ich habe einen sehr einfachen Codeblock platziert, den jeder für seine Lösung verwenden kann. Viel Glück

function parseHtmlString(yourHtmlString) { 
var element = document.createElement('div'); 
element.innerHTML = yourHtmlString; 
var imgSrcUrls = element.getElementsByTagName("img"); 
for (var i = 0; i < imgSrcUrls.length; i++) { 
     var urlValue = imgSrcUrls[i].getAttribute("src"); 
     if (urlValue) { 
     imgSrcUrls[i].setAttribute("src", "You Desired Change"); 
     } 
    } 
}