如何在 JQuery 中搜索和替换 HTML 文本字符串？答案

【问题标题】：How do I search and replace a string of HTML text in JQuery?如何在 JQuery 中搜索和替换 HTML 文本字符串？
【发布时间】：2014-09-25 16:23:23
【问题描述】：

我使用的是 JQuery 1.7.1。我有一个存储在变量中的格式良好的 HTML 块。在这个 HTML 中有一行，

<img id=“my-img” src=“…” />

在我的变量中，如何将 src 属性的值替换为其他值？

【问题讨论】：

顺便说一下，你有一些时髦的引号字符，可能会导致问题。不要在 Word 中编写代码。 ;-)

标签： jquery regex string replace

【解决方案1】：

http://api.jquery.com/prop/

var imgElement = $(htmlString).find("#my-img");
imgElement.prop('src', 'something else')`;

【讨论】：

这没有回答问题，这是关于更改变量中的属性。
@isherwood 你说得对，我读的太快了……我的错
@isherwood 我认为这篇文章的原始版本没有任何问题。

【解决方案2】：

jQuery 可以为您解析 HTML 字符串，因此您可以使用 jQuery API 来处理它，就像它是文档的一部分一样。

var htmlString = "<foo ... ></foo>";
var parsedHtml = $(htmlString);
parsedHtml.find('#my-img').prop('src', 'new value');
htmlString = parsedHtml.wrap('<div />').parent().html(); // in case you need it as string again

【讨论】：

嘿，行“var parsedHtml = $(htmlString);”正在剥离最外层的 HTML 元素（在您的示例中，“”）。是否有一种方法可以调整上述内容以保留原始 HTML，保存替换图像属性？
@Dave 这就是jQuery.find 的工作方式，它只寻找儿童。您可以使用in this answer 描述的方法，或者使用虚拟元素$('<div />').append(parsedHtml).find()
find 不能那样工作真是太好了，但我的问题不是关于 find，而是关于搜索和替换特定值。您不必在答案中使用 find ，但同样，上面的代码确实搜索并替换了我的源属性，但它改变了我希望保持不变的变量值的其他内容。
@Dave，这不应该改变我所知道的任何其他内容。您能否更具体地了解哪些变化？
如果你按照你的建议运行上面的代码，最后一行，“htmlString = parsedHtml.html();'”标签。我正在寻找一个包含“”标签并更改 HTML 中 img 的 src 的解决方案。这有意义吗？

【解决方案3】：

您不会进行字符串替换。您将访问该对象并更改属性：

$(myVar).find('#my-img').attr('src', 'my-new-src');

【讨论】：

【解决方案4】：

var html = $('<tag>...<img id="my-img" src="" />...</tag>');
html.find('#my-img').attr('src', 'other src');
//or
//html.find('#my-img').prop('src', 'other src')
htmlFinal = html.html();
$('body').html(htmlFinal);

【讨论】：

【解决方案5】：

继续使用通用的 Javascript 解决方案，它是

myHtml = myHtml.replace(/<img id=\"my-img\" src=\"(.*?)\" width=\"66\">/g, "<img id=\"my-img\" src=\"" + imgSrc + "\" width=\"66\">");

【讨论】：