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();
  • 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. – Eric Hughes Feb 25 '15 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... – LJᛃ Feb 25 '15 at 18:13
  • 1
    @EricHughes not tricky or difficult at all, where do you get that idea from? – charlietfl Feb 25 '15 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 ;-) – Eric Hughes Feb 25 '15 at 18:38

4 Answers4

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();
charlietfl
  • 170,828
  • 13
  • 121
  • 150
  • 1
    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 Feb 25 '15 at 18:13
  • @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 – charlietfl Feb 25 '15 at 18:14
  • 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. –  Feb 25 '15 at 18:19
  • Yes, but that assumes that you have parsed the html string before. – collapsar Feb 25 '15 at 18:20
  • 1
    @Shabbb will depend on there being an ancestor with that class, may also try `filter()` if it is at the root level – charlietfl Feb 25 '15 at 18:20
  • Nope. Its just a string of HTML that has not been parsed. –  Feb 25 '15 at 18:21
  • approach I gave works fine, have done this many many times to manipulate html strings ... removed, class changes , insert etc – charlietfl Feb 25 '15 at 18:22
  • That settles the dispute, I guess ;-) – collapsar Feb 25 '15 at 18:24
  • Actually I have another question. Would it also be possible to get the value of an attribute thats within the string as well? can I treat the nodes in the string similar to real elements in the DOM? –  Feb 25 '15 at 18:29
  • 1
    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 – charlietfl Feb 25 '15 at 18:30
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

danboh
  • 758
  • 2
  • 11
  • 28
  • 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. – collapsar Feb 25 '15 at 18:15
  • 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. –  Feb 25 '15 at 18:17
  • @Shabb Similar problem.You do not know whether you match an occurrence in text nodes or in an opening tag. – collapsar Feb 25 '15 at 18:19
  • 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 http://jsfiddle.net/5cph5tox/1/ – danboh Feb 25 '15 at 18:24
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 ?

collapsar
  • 17,010
  • 4
  • 35
  • 61
  • 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 Feb 25 '15 at 18:11
  • @charlietfl I have done that too, but without actually parsing the html (ie. by working on the _lexcalisation only_) it is a complete nightmare. – collapsar Feb 25 '15 at 18:22
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();
jgybrooklyn
  • 1
  • 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. – zedd45 Nov 03 '21 at 15:50