find and append string

Question

Edit: the proposed question/answer does not solve my problem: Let me rephrase: find the string between <img src="and " />" and replace it with the original plus another string like ?w=500. I thought this might be doable with regex, but I'd be happy to do it in any JS way also. I don't have jQuery in this context though....

Let's say I have a string containing some markup with image tags, among other things, like this:

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

How can I, with regex or otherwise, append a given string (say ?w=500) to each src attribute, so that I end up with

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

I've looked at similar questions on SO but haven't been able to devise a solution, my regex skills are just too poor:)

@Hubert This is not a duplicate of that question. Please see the answers below the answer you linked to. — 4castle, Nov 18 '16 at 16:45

score 1 · Answer 1 · answered Nov 18 '16 at 16:55

1

I am sharing some PHP code using string replace may be this can help you. Take all your code in a variable with single quotes and than replace jpg with .jpg?w=500. and set header with plain text.

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

answered Nov 18 '16 at 16:55

Manraj

205
1
3
10

I actually quite like the simplicity of the solution, hadn't thought about it! thanks! – Hoff Nov 18 '16 at 17:53

Hubert Grzeskowiak · Answer 2 · 2016-11-18T17:06:32.080

RegEx has no understanding of elements or attributes, so the following regex is highly fragile. It only looks for src="" and appends a given string to whatever is between the quotes. For a one-off script this should be enough. For anything more sophisticated use a proper HTML parser like SAX or DOM.

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

out:

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

In case you're trying to do this in a browser (you didn't specify), you want something like this (jQuery):

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

score 1 · Answer 3 · edited May 23 '17 at 10:30

Based in this @Gumbo answer and assuming the string you are giving, that img tag doesn't have any extra attribute before src you can apply this 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);

If you don't need any extra considerations your question looks more like a duplicate of the one I linked to you.

epascarello · Answer 4 · 2016-11-18T17:12:23.910

For very simple cases you can use a reg exp to match basic HTML, but once it gets complex, reg exp are a bad idea. Sometimes you need to clean up some code and it works fine.

With your case, your html structure is simple so you can make a match.

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>

but it can be broken very easy.... You are better off creating a DOM fragment, working with the DOM and changing the attributes. The problem with the DOM solution is it will try to load the images, which is what I think you are trying to avoid in the first place.

find and append string

4 Answers4