6

Is it possible to find an element within a string of HTML rather than from the DOM? Example,

var html = "<div><span class='find-me'></span></div>"

$("html").find(".find-me").remove();
Improve this question
4
  • It's possible, but for complicated cases of finding and manipulating, you'd effectively be writing an HTML parser yourself. If you're just looking for a single id or class, a regular expression would probably do the trick. If you're trying to remove a node that has children, it gets much more complicated, and you may as well look into XML/HTML parser libraries. Commented Feb 25, 2015 at 18:09
  • 2
    @EricHughes jQuery parses the html, the only "error" in the code snippet above is that he's using the string "html" and by that matching the html element instead of using his html variable as argument for the jQuery function. Also there is no need to write a DOM parser as one can use the browser to parse the string... Commented Feb 25, 2015 at 18:13
  • 1
    @EricHughes not tricky or difficult at all, where do you get that idea from? Commented Feb 25, 2015 at 18:14
  • 1
    @charlietfl I read the question at face value, and assumed he wanted to use pure string manipulation, rather than reading the intent to manipulate with jQuery. I'd also assumed the source was pseudocode, rather than JavaScript. I suppose JQuery can itself be considered an HTML parser ;-) Commented Feb 25, 2015 at 18:38

4 Answers 4

Reset to default
6

You are very close, wrap your variable in $()

var $div = $(html);
$div.find(".find-me").remove();

If you want to return to string can do something like:

var htmlString = $('<div>').append($div).html();
Improve this answer
Sign up to request clarification or add additional context in comments.

10 Comments

Aren't you cheating ;-) ? $(html) builds a dom structure (though not within the page's dom tree). I'm under the impression that the OP addresses a search in the lexical representation alone, without parsing.
@collapsar I think your interpretation is wrong. You can manipulate html fragments outside the DOM also and this can be easily returned to string if needed
I want to find the element within the string, and if it does exist do something. if( $div.find(".find-me").length ) {}. But it doesn't seem to be working.
@Shabbb will depend on there being an ancestor with that class, may also try filter() if it is at the root level
Yes, you can use any jQuery method on it just the same as if it is in the DOM. For example if there was an input and you wanted value from it can use val() to get it. Or use data() or attr() or addClass() etc
|
1

If HTML is a string, you could just use javascript to treat it a string use the replace function, something like:

var html = "<div><span class='find-me'></span></div>"
html = html.replace("find-me", ""); 
alert(html)

In this case, after the replace, html would be:

<div><span class=''></span></div>

Here's the Fiddle

Improve this answer

4 Comments

This only replaces the first occurrence of 'find-me'. Moreover, even when using replace(/find-me/g, '') you face the problem that the class names in text nodes of the html will be replaced too.
I dont really want to remove the element, not sure why I added remove. I actually want to run code if the element does exist within the HTML string.
@Shabb Similar problem.You do not know whether you match an occurrence in text nodes or in an opening tag.
if @Shabbb is referring to this as a string alone (not the DOM element) then this would work (replacing the first occurrence of the string). Updated the fiddle using indexof to determine if the string exists jsfiddle.net/5cph5tox/1
0

It is, but it is error-prone and unreliable. Consider <div><span class='find-me'>Devious web designer writes class='find-me' inside a text segment</span></div> - admittedly contrived but imho illustrative.

You are looking for structure information in semi-structured content. Why would you want to make your life harder by searching in _un_structured content ?

Improve this answer

2 Comments

why do you say it is error prone and unreliable? Never had a single problem doing it myself and have done it many many times
@charlietfl I have done that too, but without actually parsing the html (ie. by working on the lexcalisation only) it is a complete nightmare.
0

You could parse the string with DOMParser();

 var html = "<div><span class='find-me'></span></div>"
 dom_doc = new DOMParser().parseFromString(html, "text/xml");
 $(dom_doc).find('#foo').remove();
Improve this answer

1 Comment

You're using a mixture of jQuery and native JS, which is fine, but this is probably not the idiomatic way to do this, considering the tools jQuery gives you shield you from these details.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.