javascript - 解析 Html 字符串以从图像标签中检索和更改 SRC url

Question

背景

我正在获取一个 HTML 字符串，它是从对我创建的 Web API 的 ajax 调用中获取的。我看过加载 DOM 的示例，但是，我正在使用字符串，我认为可以使用正则表达式、jquery、子字符串方法来解决我的问题。

问题

我需要能够遍历包含 IMG 标签的 HTML 对象，我需要将这些标签更改为预定义的 URL，这将通过按钮操作触发。目前我正在尝试使用 Jquery 方法来解决这个问题，但是我在更改 URL 时遇到了问题。我将 html 作为字符串获取，并用 ~~/picture~~ 对其进行标记，因此在我将提供的示例字符串中，我将有一个包含两个不同 img 标签的 2 数组。正则表达式或子字符串方法是否会更有效，因为我正在标记此 HTML 字符串。

示例代码

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

代码问题

这段代码没有像我预期的那样改变 html。据我所知，它正在加载其他非 img 对象。

示例字符串

<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>

预期目标

我的预期目标是更改每个 img 标记中 SRC 中的 URL。示例字符串将是来 self 的 Controller 的标准格式。因为我正在标记这个字符串，所以子字符串方法会起作用吗？或正则表达式？

Answer 1

我发现这是最简单的方法，而且比 jQuery 更有效。基本上，您是将字符串注入(inject) div 并使用 JavaScript 解析现在位于 div 中的 Html 字符串。通过将字符串放在 div 中，如果您想向解决方案中添加更多逻辑/过滤，它可以提供更多功能和灵 active 。我放置了一个非常简单的代码块，任何人都可以遵循并更改以适应他们的解决方案。祝你好运

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