查找并追加字符串

find and append string

本文关键字：字符串 追加 查找      更新时间：2023-09-26

编辑:提出的问题/答案并不能解决我的问题:让我重新表达:找到<img src="和" />"之间的字符串，并将其替换为原始的加上另一个字符串，如?w=500。我认为这可能是可行的regex，但我很乐意在任何JS的方式也做到这一点。这里没有jQuery ....

假设我有一个字符串，其中包含一些带有图像标签的标记，例如:

<img src="supercool.jpg" />
<p>very cool</p>
<img src="mega.jpg" />

如何使用regex或其他方式将给定字符串(例如?w=500)附加到每个src属性，以便我最终使用

<img src="supercool.jpg?w=500" />
<p>very cool</p>
<img src="mega.jpg?w=500" />

我看过类似的问题，但还没有能够设计一个解决方案，我的正则表达式技能太差了:)

我正在分享一些PHP代码，使用字符串替换可能会对您有所帮助。将所有代码放在一个带有单引号的变量中，然后将jpg替换为.jpg?w=500。设置header为纯文本。

   echo str_replace(".jpg",".jpg?w=500",$a);

RegEx不理解元素或属性，因此下面的RegEx非常脆弱。它只查找src=""，并将给定的字符串附加到引号之间的任何内容。对于一次性脚本，这应该足够了。对于更复杂的内容，请使用合适的HTML解析器，如SAX或DOM。

var in = '<img src="asd.png" /> <img src="ddd.jpeg" />';
var out = in.replace(/src='"(.*?)'"/g, "src='"$1?w=500'"");

:

<img src="asd.png?w=500" /> <img src="ddd.jpeg?w=500" />

如果你想在浏览器中这样做(你没有指定)，你想要这样做(jQuery):

$("img[src]").each(function() {
    this.src = this.src + "?w=500";
});

基于这个@Gumbo的答案，假设你给出的字符串，img标签在src之前没有任何额外的属性，你可以应用这个RegEx 

let str = '<img src="supercool.jpg" /><p>very cool</p><img src="mega.jpg" />';
let res = str.replace(/<img src="(?:[^"'/]*'/)*([^"]+)"/g, '<img src="$1?w=500"');
console.log(res);

如果你不需要任何额外的考虑，你的问题看起来更像是我给你链接的那个问题的副本。

对于非常简单的情况，您可以使用reg exp来匹配基本的HTML，但是一旦它变得复杂，reg exp是一个坏主意。有时你需要清理一些代码，它工作得很好。

在你的例子中，你的html结构很简单，所以你可以进行匹配。

var txt = document.getElementById("in").value;
var result = txt.replace(/(<img.*'ssrc=['"])([^'"]+)/g, function(m, l, s){
    return m + (s.indexOf("?")!=-1 ? "&" : "?") + "w=500";
});
document.getElementById("out").value = result;
<textarea id="in" rows="4" cols="50">
  &lt;img src="supercool.jpg" /&gt;
  &lt;p&gt;very cool&lt;/p&gt;
  &lt;img src="mega.jpg?foo=bar" /&gt;
  &lt;img alt="boo" src="mega.jpg" /&gt;
</textarea>
<textarea id="out" rows="4" cols="50"></textarea>

，但它可以很容易打破....您最好创建一个DOM片段，使用DOM并更改属性。DOM解决方案的问题是它会尝试加载图像，这是我认为你首先要避免的。

相关文章：