{"id":302421,"date":"2020-04-24T09:00:15","date_gmt":"2020-04-24T09:00:15","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=302421"},"modified":"-0001-11-30T00:00:00","modified_gmt":"2020-04-24T09:00:15","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=302421","title":{"rendered":"\u0420\u0430\u0441\u043a\u0440\u0430\u0441\u043a\u0430 \u0442\u0435\u043a\u0441\u0442\u043e\u0432 \u0432 html \u0438 React"},"content":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/498216\/\">\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u0432 \u0442\u0435\u043a\u0441\u0442 \u0440\u0443\u043a\u0430\u043c\u0438 \u043b\u0435\u0433\u043a\u043e. \u041c\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u043c\u0435\u0442\u0438\u0442\u044c \u0442\u0435\u043a\u0441\u0442 \u043f\u0440\u044f\u043c\u043e \u0437\u0434\u0435\u0441\u044c, \u043d\u0430 \u0445\u0430\u0431\u0440\u0435, \u0430 \u043f\u043e\u0442\u043e\u043c \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u0441\u0430\u0439\u0442. \u041c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e\u0438\u0441\u043a \u0441 \u0437\u0430\u043c\u0435\u043d\u043e\u0439 \u0432 Notepad++ \u0438\u043b\u0438 \u0432 Atom.<br \/>  \u0415\u0441\u043b\u0438 \u044d\u0442\u043e 1 \u0442\u0435\u043a\u0441\u0442. \u0415\u0441\u043b\u0438 \u0442\u0435\u043a\u0441\u0442\u043e\u0432 \u043c\u043d\u043e\u0433\u043e, \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0438\u043c\u0435\u0442\u044c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043e\u0432 \u0442\u0435\u043a\u0441\u0442\u0430 html-\u0442\u0435\u0433\u0430\u043c\u0438 \u0438\u043b\u0438 \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u0434\u043b\u044f React. \u041d\u0430 \u041f\u0438\u0442\u043e\u043d\u0435 \u044d\u0442\u043e \u043d\u0435 \u0441\u043b\u043e\u0436\u043d\u043e (\u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u043e\u043a \u043a\u043e\u0434\u0430 \u043d\u0430 \u0446\u0432\u0435\u0442).<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/qp\/72\/en\/qp72enmckfd75nki2dncacgg1km.png\"><\/p>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u044b \u0437\u043d\u0430\u0435\u0442\u0435 \u041f\u0438\u0442\u043e\u043d \u0438 \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u0435 <a href=\"http:\/\/react-py.ru\/newdoc?M&amp;js_to_react\" rel=\"nofollow\">\u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435.<\/a><br \/>  \u0422\u0430\u043c \u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u044b, \u0438 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0435 \u043a\u043e\u0434\u044b. \u041f\u043e\u0434 \u043a\u0430\u0442\u043e\u043c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435.<br \/>  <a name=\"habracut\"><\/a>  <\/p>\n<h3>\u0420\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u0442\u0435\u043a\u0441\u0442\u0430 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0440\u0430\u0441\u043a\u0440\u0430\u0441\u043a\u0438 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u043d\u0430 Javascript. <\/h3>\n<p>  \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e  <\/p>\n<pre><code class=\"python\">def jsToHtml(s):<\/code><\/pre>\n<p>  \u041d\u0430 \u0432\u0445\u043e\u0434\u0435 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 html.<\/p>\n<p>  \u0417\u0430\u0434\u0430\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0449\u0438\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u0431\u043b\u043e\u043a\u043e\u0432. \u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0434\u043b\u044f \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0441\u0442\u0438\u043b\u0438, \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u043b\u043e\u0433\u0438\u0447\u043d\u0435\u0439 \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0438\u0445 \u043d\u0430 \u043a\u043b\u0430\u0441\u0441\u044b.  <\/p>\n<pre><code class=\"python\">comm = 'style=&quot;color: red;&quot;' # \u0446\u0432\u0435\u0442 \u0434\u043b\u044f \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0435\u0432 blue = 'style=&quot;color: blue;&quot;' # \u0441\u0438\u043d\u0438\u0439 ...<\/code><\/pre>\n<p>  \u0420\u0430\u0437\u043c\u0435\u0442\u043a\u0430.<br \/>  \u041f\u0435\u0440\u0432\u043e\u0435, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u2014 \u044d\u0442\u043e \u0437\u0430\u044d\u043a\u0440\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0438\u043c\u0432\u043e\u043b\u044b &#8216;&amp;&#8217;, &#8216;&lt;&#8216;, &#8216;&gt;&#8217;  <\/p>\n<pre><code class=\"python\">s = s.replace('&amp;', '&amp;amp;').replace('&lt;', '&amp;lt;').replace('&gt;', '&amp;gt;')<\/code><\/pre>\n<p>  &#8216;&amp;&#8217; \u044d\u043a\u0440\u0430\u043d\u0438\u0440\u0443\u0435\u0442\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0431\u0443\u043a\u0432\u043e\u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u044f &#8216;&amp;lt;&#8217;, &#8216;&amp;gt;&#8217; \u0438 \u043f\u0440\u043e\u0447\u0438\u0435 &#8216;&amp;&#8230;;&#8217;,<br \/>  \u0421\u0438\u043c\u0432\u043e\u043b\u044b &#8216;&lt;&#8216; \u0438 &#8216;&gt;&#8217; \u044d\u043a\u0440\u0430\u043d\u0438\u0440\u0443\u044e\u0442\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u043e\u0432\u0430\u0442\u044c \u0441 \u0442\u044d\u0433\u0430\u043c\u0438.<br \/>  \u041c\u043e\u0436\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u0447\u0435\u0433\u043e \u0437\u0430\u044d\u043a\u0440\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u043d\u043e, \u043d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u0432 utf-8 \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e.<\/p>\n<p>  \u0410\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438:  <\/p>\n<ul>\n<li>\u0411\u0435\u0440\u0435\u043c re-\u0448\u0430\u0431\u043b\u043e\u043d \u0438 \u0438\u0449\u0435\u043c \u0432\u0441\u0435 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u044b \u0442\u0435\u043a\u0441\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0435\u043c\u0443 \u0443\u0434\u043e\u0432\u043b\u0435\u0442\u0432\u043e\u0440\u044f\u044e\u0442.<\/li>\n<li>\u0412\u044b\u0440\u0435\u0437\u0430\u0435\u043c \u043a\u0430\u0436\u0434\u044b\u0439 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a \u043d\u0435\u043c\u0443 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0447\u0435\u043d\u043d\u044b\u0439 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 (\u0437\u0430\u043e\u0434\u043d\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442: \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f).<\/li>\n<li>\u041d\u0430 \u0435\u0433\u043e \u043c\u0435\u0441\u0442\u043e \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0443 \u0441 \u043d\u043e\u043c\u0435\u0440\u043e\u043c.<\/li>\n<li>\u0418 \u0442\u0430\u043a \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430.<\/li>\n<li>\u041a\u043e\u0433\u0434\u0430 \u0432\u0441\u0435 \u0440\u0430\u0441\u043a\u0440\u0430\u0448\u0435\u043d\u043e, \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u043c \u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0438 \u043d\u0430 \u0440\u0430\u0441\u043a\u0440\u0430\u0448\u0435\u043d\u043d\u044b\u0435 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u044b \u0438\u0437 \u043c\u0430\u0441\u0441\u0438\u0432\u0430.<\/li>\n<\/ul>\n<p>  \u0417\u0430\u0433\u043b\u0443\u0448\u043a\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0439, \u043d\u043e \u0443 \u043d\u0430\u0441 \u0436\u0435 \u0432 \u0442\u0435\u043a\u0441\u0442\u0435 \u043d\u0435\u0442 \u043d\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u0441\u0438\u043c\u0432\u043e\u043b\u0430 &#8216;&lt;&#8216; \u0438 \u043d\u0438 \u043e\u0434\u043d\u043e\u0433\u043e &#8216;&gt;&#8217;.<br \/>  \u0414\u0435\u043b\u0430\u0435\u043c \u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0443  <\/p>\n<pre><code class=\"python\">f'&lt;{i}&gt;'<\/code><\/pre>\n<p>  \u0433\u0434\u0435 i \u2013 \u043d\u043e\u043c\u0435\u0440 \u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0438. \u0422\u0430\u043a\u043e\u0433\u043e \u0432 \u0442\u0435\u043a\u0441\u0442\u0435 \u0442\u043e\u0447\u043d\u043e \u043d\u0435\u0442.<\/p>\n<p>  \u0427\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c, \u0435\u0441\u043b\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0430 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0430.<br \/>  \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c \u0442\u0435\u043a\u0441\u0442\u0435 \u0431\u044b\u043b\u0438 \u0441\u0442\u0440\u043e\u043a\u0438:  <\/p>\n<pre><code class=\"javascript\">` \u043f\u0440\u0438\u043c\u0435\u0440 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u0438: \u0441\u0442\u0440\u043e\u043a\u0430  \/* \u0430 \u0432 \u043d\u0435\u0439 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439 *\/ ` \/* \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439, ` \u0430 \u0432 \u043d\u0435\u043c \u0441\u0442\u0440\u043e\u043a\u0430 ` *\/<\/code><\/pre>\n<p>  \u0412\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 2:<br \/>  1. \u041f\u0440\u043e\u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0441\u0442\u0440\u043e\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u0434\u0432\u043e\u0439\u043d\u043e\u0439 \u043e\u043a\u0440\u0430\u0441.<br \/>  2. \u041d\u0430\u0439\u0442\u0438 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0438 \u0438 \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0438\u0445 \u043d\u0430 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 (\u043d\u0435\u0440\u0430\u0437\u043c\u0435\u0447\u0435\u043d\u043d\u044b\u0439) \u0442\u0435\u043a\u0441\u0442.<\/p>\n<p>  \u0414\u0435\u043b\u0430\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u0441\u0435 \u044d\u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 (10 \u0441\u0442\u0440\u043e\u043a \u043a\u043e\u0434\u0430, 10 \u0441\u0442\u0440\u043e\u043a \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f)  <\/p>\n<pre><code class=\"python\">def oneRe(reStr, s, attr, ls, multiColor=False):     '''     \u0418\u0449\u0435\u0442 \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435 s \u043d\u0443\u0436\u043d\u044b\u0435 \u0431\u043b\u043e\u043a\u0438, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0432 \u043d\u0438\u0445 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 ls,     \u043d\u0430 \u0438\u0445 \u043c\u0435\u0441\u0442\u043e \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0438 \u0441 \u043d\u043e\u043c\u0435\u0440\u0430\u043c\u0438 (&lt;0&gt;, &lt;1&gt; ...&lt;1528&gt;...).     \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0432\u0438\u0434\u0435 \u0441\u0442\u0440\u043e\u043a\u0438 \u0441 \u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0430\u043c\u0438.          reStr - re     s - \u0441\u0442\u0440\u043e\u043a\u0430     attr - \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b style\/class\/etc     ls - \u043c\u0430\u0441\u0441\u0438\u0432 \u0441 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u043e\u0439     multiColor=False, \u0435\u0441\u043b\u0438 \u043d\u0430\u0434\u043e \u0443\u0431\u0440\u0430\u0442\u044c \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u0443\u044e \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443     '''     for block in set(re.findall(reStr, s)):         toArr = block         if not multiColor: # \u0435\u0441\u043b\u0438 multiColor==False, \u0443\u0431\u0440\u0430\u0442\u044c \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u0443\u044e \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443             for prev in set(re.findall(r'&lt;[\\d]+&gt;', block)): # \u0438\u0449\u0435\u043c \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u044c: &lt;0&gt; ... &lt;21&gt;                 iPrev = int(prev[1:-1], 10)                # \u0432\u044b\u0434\u0435\u043b\u044f\u0435\u043c \u043d\u043e\u043c\u0435\u0440 \u0441\u0442\u0440\u043e\u043a\u0438 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435                 toArr = toArr.replace(prev, ls[iPrev][1])  # \u0432 \u0441\u0442\u0440\u043e\u043a\u0435 '&lt;0&gt; qwe &lt;21&gt;' \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u043c \u0441\u0441\u044b\u043b\u043a\u0438(&lt;0&gt;,&lt;21&gt;) \u043d\u0430 \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447. \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f         ls.append([f'&lt;span {attr}&gt;{toArr}&lt;\/span&gt;', toArr]) # \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0435\u0442\u0435 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 ls 2 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430: \u0440\u0430\u0437\u043c\u0435\u0447\u0435\u043d\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442 \u0438 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b          s = s.replace(block, f'&lt;{len(ls)-1}&gt;')     return s<\/code><\/pre>\n<p>  \u042d\u0442\u043e \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440: \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0439, \u044d\u043a\u0440\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0441\u0438\u043c\u0432\u043e\u043b\u044b (\\&#8217;, \\&quot;) \u043d\u0435 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f.<br \/>  \u0414\u043b\u044f \u0441\u043f\u0440\u0430\u0432\u043a\u0438: \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435  <\/p>\n<pre><code class=\"javascript\">s = s.replace(\/A + B\/g, 'A - B');<\/code><\/pre>\n<p>  \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430\u0445 Notepad++ \u0438 \u0432 Atom \u0440\u0430\u0441\u043a\u0440\u0430\u0448\u0435\u043d\u043e \u043f\u043e \u0440\u0430\u0437\u043d\u043e\u043c\u0443.<\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u0435\u0441\u0442\u044c <b>oneRe<\/b>, \u0440\u0430\u0441\u043a\u0440\u0430\u0441\u043a\u0430 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u043e. \u041f\u0440\u0438\u043c\u0435\u0440, \u0440\u0430\u0441\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u044e\u0449\u0438\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 \u0432 \u0430\u043f\u043e\u0441\u0442\u0440\u043e\u0444\u0430\u0445 \u0438 \u043a\u0430\u0432\u044b\u0447\u043a\u0430\u0445:  <\/p>\n<pre><code class=\"python\">s = oneRe(r&quot;'[\\s\\S]*?'&quot;, s, green, ls, multiColor=False) # \u0443\u0431\u0438\u0440\u0430\u0435\u043c \u0438\u0437 \u043a\u043e\u0434\u0430 '\u0441\u0442\u0440\u043e\u043a\u0438' \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 ls s = oneRe(r'&quot;[\\s\\S]*?&quot;', s, green, ls, multiColor=False) # \u0443\u0431\u0438\u0440\u0430\u0435\u043c \u0438\u0437 \u043a\u043e\u0434\u0430 &quot;\u0441\u0442\u0440\u043e\u043a\u0438&quot; \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 ls <\/code><\/pre>\n<p>  \u041f\u0440\u0438\u043c\u0435\u0440 \u0431\u043e\u043b\u0435 \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u0440\u0430\u0441\u043a\u0440\u0430\u0441\u043a\u0438. \u041d\u0443\u0436\u043d\u043e \u0432 js \u0440\u0430\u0441\u043a\u0440\u0430\u0441\u0438\u0442\u044c \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u043c\u043d\u043e\u0433\u043e\u0441\u0442\u0440\u043e\u043a\u0430\u0445 <\/p>\n<pre><code class=\"javascript\">`\u043c\u043d\u043e\u0433\u043e\u0441\u0442\u0440\u043e\u0447\u043d\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430 \u0441 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438 ${A + B} \u0438 ${A - B}`<\/code><\/pre>\n<pre><code class=\"python\">for mStr in set(re.findall(r'`[\\s\\S]+?`', s)): # \u0440\u0430\u0441\u043a\u0440\u0430\u0441\u043a\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0432\u043d\u0443\u0442\u0440\u0438 \u043c\u043d\u043e\u0433\u043e\u0441\u0442\u0440\u043e\u043a     newFstr = mStr     for val in set(re.findall(r&quot;\\$\\{[\\s\\S]+?\\}&quot;, mStr)):         ls.append([f'&lt;span {darkRed}&gt;{val}&lt;\/span&gt;', val])         newFstr = newFstr.replace(val, f'&lt;{i}&gt;')         i += 1     s = s.replace(mStr, newFstr)      s = oneRe(r'`[\\s\\S]+?`', s, green, ls, multiColor=True) # \u0443\u0431\u0438\u0440\u0430\u0435\u043c \u0438\u0437 \u043a\u043e\u0434\u0430 `\u043c\u043d\u043e\u0433\u043e\u0441\u0442\u0440\u043e\u043a\u0438` \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 ls <\/code><\/pre>\n<p>  \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0430\u0445\u043e\u0434\u0438\u043c \u043c\u043d\u043e\u0433\u043e\u0441\u0442\u043e\u0440\u043a\u0438:<br \/>  <b>re.findall(r&#8217;`[\\s\\S]+?`&#8217;, s)<\/b> \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u0431\u043b\u043e\u043a\u043e\u0432 \u0442\u0435\u043a\u0441\u0442\u0430 \u043c\u0435\u0436\u0434\u0443 \u0441\u0438\u043c\u0432\u043e\u043b\u0430\u043c\u0438 \u043e\u0431\u0440\u0430\u0442\u043d\u044b\u0445 \u043a\u0430\u0432\u044b\u0447\u0435\u043a. <br \/>  \u041a\u0430\u0436\u0434\u044b\u0439 \u0431\u043b\u043e\u043a \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043b\u0438\u0431\u043e \u043f\u0440\u043e\u0431\u0435\u043b\u044b, \u043b\u0438\u0431\u043e \u043d\u0435 \u043f\u0440\u043e\u0431\u0435\u043b\u044b ([\\s\\S] \u0442.\u0435. \u0447\u0442\u043e \u0443\u0433\u043e\u0434\u043d\u043e).<br \/>  \u0414\u043b\u0438\u043d\u0430 \u0431\u043b\u043e\u043a\u0430 1 \u0438\u043b\u0438 \u0431\u043e\u043b\u0435\u0435 (+).<br \/>  \u0411\u0435\u0437 \u0436\u0430\u0434\u043d\u043e\u0441\u0442\u0438 (&quot;?&quot; \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0441\u0438\u043c\u0432\u043e\u043b\u0430 &quot;`&quot; \u0432\u043d\u0443\u0442\u0440\u0438 \u0431\u043b\u043e\u043a\u0430 \u043d\u0435\u0442).<\/p>\n<p>  \u041a\u043e\u043f\u0438\u0440\u0443\u0435\u043c \u043d\u0430\u0439\u0434\u0435\u043d\u043d\u044b\u0439 \u0431\u043b\u043e\u043a(\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f <b>mStr<\/b>) \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <b>newFstr<\/b>.<br \/>  \u041d\u0430\u0445\u043e\u0434\u0438\u043c \u0432 \u0431\u043b\u043e\u043a\u0435 \u043f\u043e\u0434\u0431\u043b\u043e\u043a\u0438 \u0441 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438 ${&#8230;}.<\/p>\n<p>  <b>re.findall(r&quot;\\$\\{[\\s\\S]*?\\}&quot;, mStr) <\/b>\u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u0442\u0430\u043a\u0438\u0445 \u043f\u043e\u0434\u0431\u043b\u043e\u043a\u043e\u0432. \u0421\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 ls \u0438 \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u043c \u043f\u043e\u0434\u0431\u043b\u043e\u043a \u043d\u0430 \u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0443 \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 <b>newFstr<\/b>.<br \/>  \u041a\u043e\u0433\u0434\u0430 \u043f\u043e\u0434\u0431\u043b\u043e\u043a\u0438 \u043a\u043e\u043d\u0447\u0430\u0442\u0441\u044f, \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u043c \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435 <b>s<\/b> \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0431\u043b\u043e\u043a\u0430 \u043d\u0430 \u043d\u043e\u0432\u043e\u0435.<\/p>\n<p>  <b>Set <\/b>\u043d\u0435 \u043b\u0438\u0448\u043d\u0438\u0439. \u0415\u0441\u043b\u0438 <b>findall <\/b>\u0432\u0435\u0440\u043d\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0445 \u0431\u043b\u043e\u043a\u043e\u0432, \u043f\u0440\u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430 \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c \u0442\u0435\u043a\u0441\u0442\u0435 \u0437\u0430\u043c\u0435\u043d\u044f\u0442\u0441\u044f \u043d\u0430 \u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0438 \u0441\u0440\u0430\u0437\u0443 \u0432\u0441\u0435 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0435. \u041f\u0440\u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u0442\u0430\u043a\u043e\u0433\u043e \u0436\u0435 \u0431\u043b\u043e\u043a\u0430 \u0435\u0433\u043e \u0443\u0436\u0435 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c \u0442\u0435\u043a\u0441\u0442\u0435. <b>Set <\/b>\u0443\u0431\u0438\u0440\u0430\u0435\u0442 \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435.<\/p>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">\u0424\u0430\u0439\u043b jsToHtml.py<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"python\"># -*- coding: utf-8 -*-  ''' AON 2020  '''  import re  # *** *** ***  def oneRe(reStr, s, attr, ls, multiColor=False):     '''     \u0418\u0449\u0435\u0442 \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435 s \u043d\u0443\u0436\u043d\u044b\u0435 \u0431\u043b\u043e\u043a\u0438, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0432 \u043d\u0438\u0445 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 ls,     \u043d\u0430 \u0438\u0445 \u043c\u0435\u0441\u0442\u043e \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0438 \u0441 \u043d\u043e\u043c\u0435\u0440\u0430\u043c\u0438 (&lt;0&gt;, &lt;1&gt; ...&lt;1528&gt;...).     \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0432\u0438\u0434\u0435 \u0441\u0442\u0440\u043e\u043a\u0438 \u0441 \u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0430\u043c\u0438.          reStr - re     s - \u0441\u0442\u0440\u043e\u043a\u0430     attr - \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b style\/class\/etc     ls - \u043c\u0430\u0441\u0441\u0438\u0432 \u0441 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u043e\u0439     multiColor=False, \u0435\u0441\u043b\u0438 \u043d\u0430\u0434\u043e \u0443\u0431\u0440\u0430\u0442\u044c \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u0443\u044e \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443     '''     i = len(ls) # \u043d\u043e\u043c\u0435\u0440 \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0439 \u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0438     for block in set(re.findall(reStr, s)):         toArr = block         if not multiColor: # \u0435\u0441\u043b\u0438 multiColor==False, \u0443\u0431\u0440\u0430\u0442\u044c \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u0443\u044e \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443             for prev in set(re.findall(r'&lt;[\\d]+&gt;', block)): # \u0438\u0449\u0435\u043c \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u044c: &lt;0&gt; ... &lt;21&gt;                 iPrev = int(prev[1:-1], 10)                 # \u0432\u044b\u0434\u0435\u043b\u044f\u0435\u043c \u043d\u043e\u043c\u0435\u0440 \u0441\u0442\u0440\u043e\u043a\u0438 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435                 toArr = toArr.replace(prev, ls[iPrev][1])   # \u0432 \u0441\u0442\u0440\u043e\u043a\u0435 '&lt;0&gt; qwe &lt;21&gt;' \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u043c \u0441\u0441\u044b\u043b\u043a\u0438(&lt;0&gt;,&lt;21&gt;) \u043d\u0430 \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447. \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f         ls.append([f'&lt;span {attr}&gt;{toArr}&lt;\/span&gt;', toArr])  # \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0435\u0442\u0435 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 ls 2 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430: \u0440\u0430\u0437\u043c\u0435\u0447\u0435\u043d\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442 \u0438 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b          s = s.replace(block, f'&lt;{i}&gt;')              # \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u043c \u0431\u043b\u043e\u043a \u0442\u0435\u043a\u0441\u0442\u0430 \u043d\u0430 \u0437\u0430\u0443\u0433\u043b\u0443\u0448\u043a\u0443 \u0441 \u043d\u043e\u043c\u0435\u0440\u043e\u043c         i += 1     return s  # *** *** ***  def operColor(s, ls, color):     '''     \u0440\u0430\u0441\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u044b.     \u0414\u043e\u043b\u0436\u043d\u0430 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0439, \u043a\u043e\u0433\u0434\u0430 \u0432 \u0442\u0435\u043a\u0441\u0442\u0435 \u043d\u0435 \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u043d\u0438 \u0441\u0442\u0440\u043e\u043a, \u043d\u0438 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0435\u0432     '''     i = len(ls)     for c in ['&amp;lt;=', '&amp;gt;=', '=&amp;lt;', '=&amp;gt;', '&amp;lt;', '&amp;gt;', '&amp;amp;&amp;amp;', '&amp;amp;',               '===', '!==', '==', '!=', '+=', '-=', '++', '--', '||']:         ls.append([f'&lt;span {color}&gt;{c}&lt;\/span&gt;',0])         s = s.replace(c, f'&lt;{i}&gt;')         i += 1     for c in '!|=+-?:,.[](){}%*\/':         ls.append([f'&lt;span {color}&gt;{c}&lt;\/span&gt;',0])         s = s.replace(c, f'&lt;{i}&gt;')         i += 1     return s  # *** *** ***  def jsToHtml(s):     '''     \u0414\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0439 \u0440\u0430\u0441\u043a\u0440\u0430\u0441\u0447\u0438\u043a \u043a\u043e\u0434\u0430.     \u0417\u0430\u043c\u0435\u043d\u044f\u0435\u0442 \u0441\u0442\u0440\u043e\u043a\u0438, \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438 \u0438 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u0441\u043b\u043e\u0432\u0430 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 &lt;span&gt;.     '''      black = '''style=&quot;font-family: 'Courier New', monospace;         background: #fff;          color: black;         font-weight: bold;         border: 1px solid #ddd;         padding: 5px;         text-align: left;         white-space: pre;&quot;'''     comm = 'style=&quot;color: red;&quot;'     green = 'style=&quot;color: green; font-style: italic;&quot;'     blue = 'style=&quot;color: blue;&quot;'     red2 = 'style=&quot;color: #840;&quot;'      s = s.replace('&amp;', '&amp;amp;').replace('&lt;', &amp;'&amp;lt;').replace('&gt;', '&amp;gt;')   # \u044d\u043a\u0440\u0430\u043d\u0438\u0440\u0443\u0435\u043c \u0441\u0438\u043c\u0432\u043e\u043b\u044b '&amp;', '&lt;', '&gt;'      ls = []      i = 0     for mStr in set(re.findall(r'`[\\s\\S]+?`', s)): # \u0440\u0430\u0441\u043a\u0440\u0430\u0441\u043a\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0432\u043d\u0443\u0442\u0440\u0438 \u043c\u043d\u043e\u0433\u043e\u0441\u0442\u0440\u043e\u043a         newFstr = mStr         for val in set(re.findall(r&quot;\\$\\{[\\s\\S]+?\\}&quot;, mStr)):             ls.append([f'&lt;span {darkRed}&gt;{val}&lt;\/span&gt;', val])             newFstr =newFstr.replace(val, f'&lt;{i}&gt;')             i += 1         s = s.replace(mStr, newFstr)              s = oneRe(r'`[\\s\\S]+?`', s, green, ls, multiColor=True) # \u0443\u0431\u0438\u0440\u0430\u0435\u043c \u0438\u0437 \u043a\u043e\u0434\u0430 `\u043c\u043d\u043e\u0433\u043e\u0441\u0442\u0440\u043e\u043a\u0438` \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 ls     s = oneRe(r&quot;'[\\s\\S]*?'&quot;, s, green, ls, multiColor=False) # \u0443\u0431\u0438\u0440\u0430\u0435\u043c \u0438\u0437 \u043a\u043e\u0434\u0430 '\u0441\u0442\u0440\u043e\u043a\u0438' \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 ls     s = oneRe(r'&quot;[\\s\\S]*?&quot;', s, green, ls, multiColor=False) # \u0443\u0431\u0438\u0440\u0430\u0435\u043c \u0438\u0437 \u043a\u043e\u0434\u0430 &quot;\u0441\u0442\u0440\u043e\u043a\u0438&quot; \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 ls     s = oneRe(r'\/[\\s\\S].*?\/g\\b', s, green, ls, multiColor=False) # \u0443\u0431\u0438\u0440\u0430\u0435\u043c \u0438\u0437 \u043a\u043e\u0434\u0430 re-\u0441\u0442\u0440\u043e\u043a\u0438 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 ls     s = oneRe(r'\/[\\s\\S].*?\/\\.', s, green, ls, multiColor=False) # \u0443\u0431\u0438\u0440\u0430\u0435\u043c \u0438\u0437 \u043a\u043e\u0434\u0430 re-\u0441\u0442\u0440\u043e\u043a\u0438 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 ls     s = oneRe(r'\/\\*[\\s\\S]+?\\*\/', s, comm, ls, multiColor=False) # \u0443\u0431\u0438\u0440\u0430\u0435\u043c \u0438\u0437 \u043a\u043e\u0434\u0430 \/* \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438 *\/ \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 ls (\u043b\u0443\u0447\u0448\u0438\u0439 \u0446\u0432\u0435\u0442 - \u043a\u0440\u0430\u0441\u043d\u044b\u0439)     s = oneRe(r'\/\/[\\s\\S]*?\\n', s, comm, ls, multiColor=False) # \u0443\u0431\u0438\u0440\u0430\u0435\u043c \u0438\u0437 \u043a\u043e\u0434\u0430 \/\/ \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 ls (\u043b\u0443\u0447\u0448\u0438\u0439 \u0446\u0432\u0435\u0442 - \u043a\u0440\u0430\u0441\u043d\u044b\u0439)      i = len(ls)      # \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0441\u043a\u0440\u0430\u0441\u0438\u0442\u044c \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441     for c in ['new', 'JSON', 'Promise', 'then', 'catch', 'let', 'const', 'var', 'true', 'false', 'class', 'from', 'import', 'set', 'list', 'for', 'in', 'if', 'else', 'return', 'null']:         ls.append([f'&lt;span {blue}&gt;{c}&lt;\/span&gt;',0])         s = re.sub (r'\\b%s\\b' % c, f'&lt;{i}&gt;', s)         i += 1      # \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0441\u043a\u0440\u0430\u0441\u0438\u0442\u044c \u043c\u043e\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435     for c in ['window', 'doc', 'cmd', 'init','init2', 'recalc', 'hide', 'readOnly', 'validate']:         ls.append([f'&lt;span {darkRed}&gt;{c}&lt;\/span&gt;',0])         s = re.sub (r'\\b%s\\b' % c, f'&lt;{i}&gt;', s)         i += 1      s = operColor(s, ls, darkBlue) # \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0441\u043a\u0440\u0430\u0441\u0438\u0442\u044c \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u044b      for j in range(len(ls), 0, -1):  # \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u044b, \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438, \u0441\u0442\u0440\u043e\u043a\u0438 \u0441 \u043d\u043e\u0432\u044b\u043c \u043e\u043a\u0440\u0430\u0441\u043e\u043c         s = s.replace(f'&lt;{j-1}&gt;', ls[j-1][0])      return f'&lt;div {black}&gt;{s}&lt;\/div&gt;'  # *** *** *** <\/code><\/pre>\n<p>  <\/div>\n<\/p><\/div>\n<h3>Html \u0432 React<\/h3>\n<p>  \u041f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u044c html \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 React \u043c\u043e\u0436\u043d\u043e \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 <a href=\"http:\/\/htmltoreact.com\" rel=\"nofollow\">htmltoreact.com<\/a>. \u0422\u0430\u043c \u0436\u0435 \u0435\u0441\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 GitHub.<\/p>\n<p>  \u041c\u0435\u043d\u044f \u044d\u0442\u043e \u043d\u0435 \u0443\u0441\u0442\u0440\u043e\u0438\u043b\u043e: \u0432\u043e \u043f\u0435\u0440\u0432\u044b\u0445 \u043e\u043d \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442 \u043d\u0435 \u0441\u043e\u0432\u0441\u0435\u043c \u0442\u043e, \u0447\u0442\u043e \u043c\u043d\u0435 \u043d\u0430\u0434\u043e, \u0432\u043e \u0432\u0442\u043e\u0440\u044b\u0445 \u2013 \u043a\u0430\u043a \u044f \u044d\u0442\u043e \u0447\u0443\u0434\u043e \u0437\u0430\u0442\u0430\u0449\u0443 \u043a \u0441\u0435\u0431\u0435 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440.<\/p>\n<p>  \u041d\u0430\u043f\u0438\u0441\u0430\u043b \u0441\u0432\u043e\u0439.<\/p>\n<p>  \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 lxml (pip install lxml \u0438\u043b\u0438 pip3 install lxml)<br \/>  \u0418\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c  <\/p>\n<pre><code class=\"python\">from xml.dom.minidom import parseString from lxml import html, etree<\/code><\/pre>\n<p>  \u041f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u043c html-\u0442\u0435\u043a\u0441\u0442 \u0432 xhtml-\u0442\u0435\u043a\u0441\u0442. \u042d\u0442\u043e \u043f\u043e\u0447\u0442\u0438 \u043e\u0434\u043d\u043e \u0438 \u0442\u043e \u0436\u0435, \u043d\u043e \u0432\u0441\u0435 \u0442\u0435\u0433\u0438 \u0437\u0430\u043a\u0440\u044b\u0442\u044b.  <\/p>\n<pre><code class=\"python\">doc = html.fromstring(htmlText) ht = etree.tostring(doc, encoding='utf-8').decode()<\/code><\/pre>\n<p>  \u041f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0439 xhtml \u043f\u0430\u0440\u0441\u0438\u043c \u0432 \u0434\u043e\u043c-\u0434\u0435\u0440\u0435\u0432\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0438\u043d\u0438\u0434\u043e\u043c\u0430.  <\/p>\n<pre><code class=\"python\">dom = parseString(ht)<\/code><\/pre>\n<p>  \u0414\u0435\u043b\u0430\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0440\u0435\u043a\u0443\u0440\u0441\u0438\u0432\u043d\u043e \u0441\u043a\u0430\u0447\u0435\u0442 \u043f\u043e \u043d\u043e\u0434\u0430\u043c \u0438 \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0432\u0438\u0434\u0435 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 React.<\/p>\n<p>  Dom-\u0434\u0435\u0440\u0435\u0432\u043e \u043f\u043e\u0441\u043b\u0435 \u0432\u044b\u0437\u043e\u0432\u0430 parseString \u2013 \u044d\u0442\u043e \u043d\u043e\u0434\u0430-\u043f\u0430\u043f\u0430, \u0443 \u043a\u043e\u0442\u043e\u0440\u0430\u0439 \u0435\u0441\u0442\u044c <br \/>  \u043d\u043e\u0434\u044b-\u0434\u0435\u0442\u0438, \u0443 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0435\u0441\u0442\u044c \u0435\u0449\u0435 \u0434\u0435\u0442\u0438 \u0438 \u0442.\u0434.<\/p>\n<p>  \u041a\u0430\u0436\u0434\u0430\u044f \u043d\u043e\u0434\u0430 \u2013 \u044d\u0442\u043e \u0441\u043b\u043e\u0432\u0430\u0440\u044c, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u0435\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435:  <\/p>\n<ul>\n<li>nodeName \u2014 \u0438\u043c\u044f \u043d\u043e\u0434\u044b, \u0441\u0442\u0440\u043e\u043a\u0430<\/li>\n<li>childNodes \u2014 \u043d\u043e\u0434\u044b-\u0434\u0435\u0442\u0438, \u0441\u043f\u0438\u0441\u043e\u043a<\/li>\n<li>attributes- \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b, \u0441\u043b\u043e\u0432\u0430\u0440\u044c <\/li>\n<li>\u0423 \u043d\u043e\u0434\u044b \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c #text \u0435\u0441\u0442\u044c nodeValue(\u0441\u0442\u0440\u043e\u043a\u0430)<\/li>\n<\/ul>\n<p>  \u041f\u0440\u0438\u043c\u0435\u0440:  <\/p>\n<pre><code class=\"xml\">&lt;div class=&quot;A&quot; style=&quot;color: red;&quot;&gt;Red of course,&lt;br&gt; \u0421\u044d\u0440&lt;\/div&gt;<\/code><\/pre>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0439 \u043f\u043e\u043b\u0443\u0447\u0438\u043c:  <\/p>\n<pre><code class=\"python\">{ 'nodeName':'div',   'attributes': {'style': 'color: red;', 'class': 'A'},   'childNodes': [     {'nodeName':'#text', 'nodeValue': 'Red of course,'},     {'nodeName':'br'},     {'nodeName':'#text', 'nodeValue': '\u0421\u044d\u0440'},   ], } <\/code><\/pre>\n<p>  \u041f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u044c dom \u0432 \u0441\u0442\u0440\u043e\u043a\u0443 \u043d\u0435\u0441\u043b\u043e\u0436\u043d\u043e (\u0435\u0441\u0442\u044c pprint), \u043f\u0440\u0438 \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 React-\u043a\u043e\u0434\u0430, \u044f \u0437\u0430\u043c\u0435\u043d\u0438\u043b class \u043d\u0430 className \u0438 \u043f\u0435\u0440\u0435\u0434\u0435\u043b\u0430\u043b \u0430\u0442\u0440\u0438\u0431\u0443\u0442 style.<br \/>  \u0412 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0445 \u043d\u043e\u0434\u0430\u0445 \u0437\u0430\u044d\u043a\u0440\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u044b &#8216;{&#8216;, &#8216;}&#8217;, &#8216;&lt;&#8216;, &#8216;&gt;&#8217;.<\/p>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">\u0424\u0430\u0439\u043b htmlToReact.py<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"python\"># -*- coding: utf-8 -*-  # -*- coding: utf-8 -*-   from xml.dom.minidom import parseString from lxml import html, etree  # *** *** ***  _react = ''  def htmlToReact(buf):     '''     buf - html-\u0441\u0442\u0440\u043e\u043a\u0430     \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 ReactJS-\u0441\u0442\u0440\u043e\u043a\u0443      '''     global _react     _react = ''      try:         r = re.search('&lt;[\\\\s\\\\S]+&gt;', buf)         if r:             doc = html.fromstring(r.group(0))             ht = etree.tostring(doc, encoding='utf-8').decode()             xHtmlToReact(parseString(ht).childNodes[0], '')             return _react         else:             return '&lt;empty\/&gt;'     except Exception as ex:         s = f'htmlToReact: \\n{ex}'         print(s)         return s  # *** *** ***  def sU(a, c):     '''     xlink:show   -&gt;  xlinkShow     font-weight  -&gt;  fontWeight     '''     l, _, r = a.partition(c)     return ( (l + r[0].upper() + r[1:]) if r else a).strip()  # *** *** ***  def xHtmlToReact(n, shift='\\n    '):     '''     \u041d\u0443\u0436\u0435\u043d \u0434\u043b\u044f \u043f\u043e\u043a\u0430\u0437\u0430 \u0440\u0435\u0430\u043a\u0442-\u043a\u043e\u0434\u0430     \u043d\u0430 \u0432\u0445\u043e\u0434\u0435 \u043d\u043e\u0434\u0430, \u0440\u0435\u043a\u0443\u0440\u0441\u0438\u044f \u043f\u043e \u043d\u043e\u0434\u0430\u043c \u0441 \u0437\u0430\u043c\u0435\u043d\u043e\u0439 \u043c\u0438\u043d\u0443\u0441\u043e\u0432 \u043d\u0430 upperCase     \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442 \u0432 global \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 _react     '''     global _react      if n.nodeName.lower() in ['head', 'script']:         return          _react += shift + '&lt;' + n.nodeName.lower()     if n.attributes:         for k, v in n.attributes.items():             if k == 'style':                 style = ''                 for s in v.split(';'):                     if s.strip():                         l, _, r = s.partition(':')                         style += f'''{sU(l, '-')}: &quot;{r.strip()}&quot;, '''                 if style:                     _react += ' style={{' + style + '}}'             elif k == 'class':                 _react += f' className=&quot;{v}&quot;'             else:                 kk = k.replace('xlink:href', 'href') # deprcated                 _react += f''' {sU( sU(kk, ':'), '-' )}=&quot;{v}&quot;'''              _react += '&gt;'     if n.childNodes:         for child in n.childNodes:             if  child.nodeName == '#text':                 tx = child.nodeValue                 for x in ['{', '}', '&lt;', '&gt;']:                     tx = tx.replace(x, '{&quot;' + x + '&quot;_{_')                 tx = tx.replace('_{_', '}')                 if tx[-1] == ' ':                     tx = tx[:-1] + '\\xa0'                 _react += tx.replace('\\n', '&lt;br\/&gt;')             else:                 xHtmlToReact(child)                      _react += f'{shift}&lt;\/{n.nodeName.lower()}&gt;'  # *** *** ***  <\/code><\/pre>\n<p>  <\/div>\n<\/p><\/div>\n<p>  \u041f\u0440\u0438\u043c\u0435\u0440\u044b \u0438 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0435 \u0442\u0435\u043a\u0441\u0442\u044b <a href=\"http:\/\/react-py.ru\/newdoc?M&amp;js_to_react\" rel=\"nofollow\">\u0437\u0434\u0435\u0441\u044c.<\/a><\/p>\n<p>  P.S. \u041d\u0430 \u0445\u0430\u0431\u0440\u0435 \u0440\u0430\u0441\u043a\u0440\u0430\u0441\u043a\u0430 \u043f\u0438\u0442\u043e\u043d\u043e\u0432\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u0434\u0430 (\u0430 \u043c\u043e\u0436\u0435\u0442 \u0438 \u0434\u0440\u0443\u0433\u0438\u0445) \u043d\u0435 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u0430. \u0415\u0441\u043b\u0438 \u0432 \u043f\u0438\u0442\u043e\u043d\u043e\u0432\u0441\u043a\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435 \u0435\u0441\u0442\u044c \u0431\u0443\u043a\u0432\u043e\u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0435<b> &amp;amp;<\/b>, \u043e\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a <b>&amp;<\/b>. \u0412 \u0441\u0432\u043e\u0438\u0445 \u043a\u043e\u0434\u0430\u0445 \u044f \u043f\u043e\u0434\u043f\u0440\u0430\u0432\u0438\u043b, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e. \u0415\u0441\u043b\u0438 \u0445\u0430\u0431\u0440 \u043e\u0448\u0438\u0431\u043a\u0443 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442, \u043c\u043e\u0438 \u0442\u0435\u043a\u0441\u0442\u044b \u043f\u0435\u0440\u0435\u043a\u0440\u0438\u0432\u044f\u0442\u0441\u044f.<\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/498216\/\"> https:\/\/habr.com\/ru\/post\/498216\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/498216\/\">\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u0432 \u0442\u0435\u043a\u0441\u0442 \u0440\u0443\u043a\u0430\u043c\u0438 \u043b\u0435\u0433\u043a\u043e. \u041c\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u043c\u0435\u0442\u0438\u0442\u044c \u0442\u0435\u043a\u0441\u0442 \u043f\u0440\u044f\u043c\u043e \u0437\u0434\u0435\u0441\u044c, \u043d\u0430 \u0445\u0430\u0431\u0440\u0435, \u0430 \u043f\u043e\u0442\u043e\u043c \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u0441\u0430\u0439\u0442. \u041c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e\u0438\u0441\u043a \u0441 \u0437\u0430\u043c\u0435\u043d\u043e\u0439 \u0432 Notepad++ \u0438\u043b\u0438 \u0432 Atom.<br \/>  \u0415\u0441\u043b\u0438 \u044d\u0442\u043e 1 \u0442\u0435\u043a\u0441\u0442. \u0415\u0441\u043b\u0438 \u0442\u0435\u043a\u0441\u0442\u043e\u0432 \u043c\u043d\u043e\u0433\u043e, \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0438\u043c\u0435\u0442\u044c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043e\u0432 \u0442\u0435\u043a\u0441\u0442\u0430 html-\u0442\u0435\u0433\u0430\u043c\u0438 \u0438\u043b\u0438 \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u0434\u043b\u044f React. \u041d\u0430 \u041f\u0438\u0442\u043e\u043d\u0435 \u044d\u0442\u043e \u043d\u0435 \u0441\u043b\u043e\u0436\u043d\u043e (\u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u043e\u043a \u043a\u043e\u0434\u0430 \u043d\u0430 \u0446\u0432\u0435\u0442).<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/qp\/72\/en\/qp72enmckfd75nki2dncacgg1km.png\"><\/p>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u044b \u0437\u043d\u0430\u0435\u0442\u0435 \u041f\u0438\u0442\u043e\u043d \u0438 \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u0435 <a href=\"http:\/\/react-py.ru\/newdoc?M&amp;js_to_react\" rel=\"nofollow\">\u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435.<\/a><br \/>  \u0422\u0430\u043c \u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u044b, \u0438 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0435 \u043a\u043e\u0434\u044b. \u041f\u043e\u0434 \u043a\u0430\u0442\u043e\u043c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435.  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-302421","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/302421","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=302421"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/302421\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=302421"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=302421"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=302421"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}