Staffer901 Staffer901 - 4 months ago 9
jQuery Question

Parsing an Html string in order to retrieve and change the SRC url from an image tag

Background

I am getting an HTML string which I am getting from a ajax call to a web api which I created. I have seen examples which load the DOM however, I am working with a string, and I think there can be a regex, jquery, substring approach to my problem.

Question

I will need the ability to go through an HTML object which will contain IMG tags that I will need to change to predefined URL, which will be triggered through a button action. Currently I am trying a Jquery approach to this problem however I am having in issue changing the URL. I am getting the html as a string and I am tokenizing it with

~~/picture~~
so in the example string I will provide I will have an array of 2 which contain two different img tags. Would a regex or substring approach be more efficient since I am tokenizing this HTML string.

Sample Code

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);
}


Issue with the Code

This code is not changing the html as I expected. From what I see it is loading other none img objects.

Sample 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

My intended Goal is to change the URL in the SRC in every img tag. The example string will be the standard format which comes from my controller. since I am tokenizing this string would a substring approach work ? or regex?

Answer

I found this to be the easiest way to do it, and also more efficient than jQuery. basically you are injecting the string into a div and using JavaScript to parse through the Html string which is now in a div. By placing the string in the div it give more functionality and flexibility if you want to add more logic/filtering to your solution. I placed a very simple block of code anyone can follow and change to accommodate their solution. Good luck

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");
        }
    }
}