Cut a string in a string

Question

I have a string that is returned from PHP through AJAX. The string value is like this:

<img src="/images/error.png"/>Invalid name`

Is there any way to cut the string starting with < and ending with > ?

I only need the <img/> from the string. I do not want to return the only <img/> from PHP because the full string is used in another page.

Will there ever be tags inside the img src that will can be ">"? Will it always start with "<"? — user829323, Mar 20 '13 at 00:08
To "cut" a string by a certain string delimiter, use the `split` method: `string.split("<")`. If this string isn't static, but can contain arbitrary HTML, it is better to use the DOM to parse the HTML and get the part you want. — Asad Saeeduddin, Mar 20 '13 at 00:08
This makes me think of http://stackoverflow.com/a/1732454/464257 ... — Shaz, Mar 20 '13 at 00:09
@Harikrishnan Yes, but will your string contain HTML other than `img` tags? — Asad Saeeduddin, Mar 20 '13 at 00:10
@Harikrishnan split the string by the delimiter "/>" and remove the first element of the first element will return the inside of the img tag, assuming you do not have /> anywhere else inside the tag for example inside an attribute. — user829323, Mar 20 '13 at 00:14

score 3 · Accepted Answer · answered Mar 20 '13 at 00:11

3

What this what you meant? This alerts '<img src="/images/error.png"/>'

jsFiddle

var img = '<img src="/images/error.png"/>Invalid name';
var slice = img.slice(0, img.indexOf('>') + 1);
alert(slice);

answered Mar 20 '13 at 00:11

Daniel Imms

47,944
19
150
166

score 1 · Answer 2 · answered Mar 20 '13 at 00:14

1

You could use the split() method and add back in the last character.

var returnedString = '<img src="/images/error.png"/>Invalid name';
var returnedImage = returnedString.split('>')[0] +'>';

answered Mar 20 '13 at 00:14

Paul Sham

3,185
2
24
31

targumon · Answer 3 · 2013-03-20T00:41:02.263

1

var str = '<img src="/images/error.png"/>Invalid name';
alert(str.substring(str.indexOf('<'), str.indexOf('>')+1));

Edit: If this action is going to be repeated many times, then performance should also be considered. See 2 versions for each pure JS answer you got so far: the first 3 assume the tag starts at 0 ('<'), the last 3 don't: http://jsperf.com/15512887

I'm now proud of myself even if my answer won't be the chosen one :-)

edited Mar 20 '13 at 00:41

answered Mar 20 '13 at 00:16

targumon

1,041
12
26

1

+1 `slice` vs `substring` is probably a little in `substring`'s favour as it's designed just for strings, where as `slice` works with all arrays. Split is much slower because it splits the array into two where we only actually care about the first one. – Daniel Imms Mar 20 '13 at 00:51

score 0 · Answer 4 · answered Mar 20 '13 at 08:31

If you explicitly what to get the initial tag only of a string, then:

var s = '  <img src="/images/error.png"/>Invalid name';

var tag = '<' + s.split(/\W+/g)[1] + '>';

Though for robustness you should do something like:

var parts = s.split(/\W+/g);
var tag = parts.length? '<' + parts[1] + '>' : '';

Cut a string in a string

4 Answers4