Get invalid HTML code in curly brackets with jQuery

Question

I have some (invalid) HTML code which I cannot change:

<a href="#" id="text1"{some-data}>...</a>
<a href="#" id="text2"{some-other-data}>...</a>

With jQuery, I select one of the two anchors:

function someFunction(id) {
  $('text'+id)...;
}

Now, I'd like to get the text inside the curly brackets. So, for id=1 this would mean some-data, for id=2 this would be some-other-data.

How can I do this?

To make it easy: there will be only one curly bracked thing in one element.

Why don't you use an actual data attribute? Who knows what kind of weird side-effects raw text like that could have inside the element tag. — animuson, Mar 07 '13 at 19:18
I would to that, but it's not my code and I'm not allowed to change it. — , Mar 07 '13 at 19:19
IE reorganises the arguments within a tag. I believe you'll never reconstruct the data on that browser. — John Dvorak, Mar 07 '13 at 19:20
@JanDvorak that's interesting, because _why the hell is it there_ then? (Rhetorical question) — , Mar 07 '13 at 19:22
@CamilStaps what's there? The definition order of tag attributes holds no semantic value. `
` is the same element as `
`. IE doesn't remember which attribute came first in HTML. — John Dvorak, Mar 07 '13 at 19:24
@JanDvorak Well, you said, it wouldn't be possible to reconstruct the data in IE. This application is browser-compatible, so _if_ the data in the brackets is used, it should be possible to reconstruct it. But if it isn't, like you said, then what would be the use of adding it to the HTML? — , Mar 07 '13 at 19:26
@CamilStaps invalid HTML is invalid. You can pray there are no spaces, though. — John Dvorak, Mar 07 '13 at 19:29
@CamilStaps in that case I believe the solutions posted by others will work. — John Dvorak, Mar 07 '13 at 19:32

score 3 · Accepted Answer · edited May 23 '17 at 12:04

3

So, basically you want to get the 'outer' html and then search for whats in between the curly braces.

The first part of that has been solved here

Get selected element's outer HTML

So using the outerHTML plugin from that question

jQuery.fn.outerHTML = function(s) {
    return s
        ? this.before(s).remove()
        : jQuery("<div>").append(this.eq(0).clone()).html();
};

function someFunction(id) {
  return $('#text'+id).outerHTML().match(/{(.*)}/)[1];
}

edited May 23 '17 at 12:04

Community

1
1

answered Mar 07 '13 at 19:30

JoeyP

2,622
2
26
25

1

Note that this only works because the value may not contain spaces. If it did, it would produce incorrect results, even in Chrome. – John Dvorak Mar 07 '13 at 19:34
`
` cannot contain block-level elements IIRC; certainly not other `
`s. I recommend switching to a `
`
– John Dvorak Mar 07 '13 at 19:36
@Jan Dvorak, good call. I updated the answer to include a `
` instead of a `
`
– JoeyP Mar 07 '13 at 19:40

Get invalid HTML code in curly brackets with jQuery

1 Answers1

Linked