Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>querySearchNew to Visual Studio Code? Get it now.
querySearch

querySearch

yuya.kawakamy

|
132 installs
| (0) | Free
This extension is search html file by `CSS Selector`.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

querysearch

This extension is search html file by CSS Selector.

Usage

Search

input CSS Selector to QUERYPANEL, click Search button. see SEARCH RESULT.

search

Replace

This feature is experimental, may be changed in a future.
Replace feature is implemented by javascript sandbox.

variable $ is defined select element. DOM's Node and Element methods and propeperties are partial available

ex. remove first li element and insert it after ul closing tag.

replace

/*
  selector: "ul:has(li) "
  input:
    <ul>
      <li>first</li>
      <li>second</li>
      <li>third</li>
    </ul>
*/
var s = $.querySelector("li");
$.removeChild(s);
$.insertAdjacentHTML("afterend", s.outerHTML);
/*
  result:
    <ul>
      <li>second</li>
      <li>third</li>
    </ul><li>first</li>
*/

ex. append/modify/remove attributes.

/*
  selector: "ul:has(li) "
  input:
		<ul removeAttr="REMOVE" modifyAttr="OLD_VALUE" notModifyAttr="NOT_MODIFIED">
  		<li></li>
		</ul>
*/
$.setAttribute("appendttr", "APPENDED");
$.setAttribute("modifyAttr", "NEW_VALUE");
$.removeAttribute("removeAttr");

/*
  result:
		<ul modifyAttr="NEW_VALUE" notModifyAttr="NOT_MODIFIED" appendttr="APPENDED">
		<li></li>
		</ul>
*/

ATTENTION: In current version, does not allow manipulate the ancestor elements of $ (e.g. $.parentNode).
Because $ element is clone, but isn't indicated DOM tree directly.

SORRY

This translation was written by someone who is not a native English speaker. there may be errors in the translation.

see README-ja.md

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft