{"id":2927,"date":"2013-08-28T11:46:03","date_gmt":"2013-08-28T17:46:03","guid":{"rendered":"http:\/\/bililite.com\/blog\/?p=2927"},"modified":"2014-02-26T17:15:29","modified_gmt":"2014-02-26T23:15:29","slug":"wrap-method-for-bililiterange","status":"publish","type":"post","link":"https:\/\/bililite.com\/blog\/2013\/08\/28\/wrap-method-for-bililiterange\/","title":{"rendered":"<code>wrap<\/code> method for <code>bililiteRange<\/code>"},"content":{"rendered":"<p>I wanted to be able to wrap arbitrary text with HTML elements, so I added a <code class=\"language-javascript\" >wrap<\/code> method to my <a href=\"http:\/\/bililite.com\/blog\/2011\/01\/17\/cross-browser-text-ranges-and-selections\/\" title=\"Cross-Browser Text Ranges and Selections\">bililiteRange<\/a> routines. Now I can do something like <code class=\"language-javascript\" >bililiteRange(el).find(\/foo\/).wrap(document.createElement('strong'))<\/code> and I have instant highlighting!<\/p>\n<p>It obviously can only work if the range is defined on an actual HTML element, not on the text of a <code class=\"language-html\" >&lt;input&gt;<\/code> or <code class=\"language-html\" >&lt;text&gt;<\/code> element (it throws an error if you try).<\/p>\n<p>For standards-based browsers, there is a simple <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Range.surroundContents\"><code>surroundContents<\/code><\/a> method that does it in one step. Note that it uses the actual node passed in, so if you need to reuse it, remember to clone it.<\/p>\n<p>IE &lt; 10 doesn't have anything so nice, so I have to hack it by extracting and re-inserting the HTML with <a href=\"http:\/\/msdn.microsoft.com\/en-us\/library\/ie\/ms533874(v=vs.85).aspx\"><code>htmltext<\/code><\/a> and <a href=\"http:\/\/msdn.microsoft.com\/en-us\/library\/ie\/ms536656(v=vs.85).aspx\"><code>pasteHTML<\/code><\/a>.<\/p>\n<p>It is possible to attempt to create invalid HTML; for instance wrap a range containing a <code class=\"language-html\" >&lt;p&gt;<\/code> with a <code class=\"language-html\" >&lt;span&gt;<\/code> element. Depending on the browser, this may throw an error or create undefined results.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I wanted to be able to wrap arbitrary text with HTML elements, so I added a wrap method to my bililiteRange routines. Now I can do something like bililiteRange(el).find(\/foo\/).wrap(document.createElement('strong')) and I have instant highlighting! It obviously can only work if the range is defined on an actual HTML element, not on the text of a [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18,10],"tags":[],"_links":{"self":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/2927"}],"collection":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/comments?post=2927"}],"version-history":[{"count":2,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/2927\/revisions"}],"predecessor-version":[{"id":2929,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/2927\/revisions\/2929"}],"wp:attachment":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/media?parent=2927"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/categories?post=2927"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/tags?post=2927"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}