blocks|key|2590553|text|使用CSS+(或者XPath)选择器和一些JavaScript可以很容易地做到这一点。为了让事情变得更简单，可以混合使用jQuery来访问像.wrapInner这样的方法。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2590554|​|2590555|$("p:nth-child(2)").wrapInner("<u></u>");|code-block|syntax|javascript|2590556|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<test>
<p>baz+foobar</p><p>foo<i>bar</i></p>
</test>|2590557|2590558|下面是一个在vanilla+JS中使用CSS查询选择器的示例：|2590559|2590560|var+wrapper+=+document.createElement("u");
var+parent+=+document.querySelector("p:nth-child(2)");
var+div+=+parent.appendChild(wrapper);
while(parent.firstChild+!==+wrapper)
++++wrapper.appendChild(parent.firstChild);|2590561|<p>baz+foobar</p><p>foo<i>bar</i></p>|2590562|2590563|为了跟上进度，这里有一个关于这个问题的很好的介绍：JavaScript+HTML+DOM|2590564|下面是对CSS选择器的一个非常有趣的介绍：CSS+Diner。|2590565|2590566|对于您的特定请求，如果您坚持使用regex，这里是一种尝试|2590567|2590568|找到有问题的子字符串的开始和结束位置，并使用一个整洁的函数|unordered-list-item|2590569|，用您选择的标签对选定的文本进行换行。|2590570|2590571|为了让事情变得更有趣，我从HTML片段中搜索不以所选文本的位置0开头的子字符串。如果愿意，只需更改正则表达式模式或将0作为起始索引传递给CustomWrapper函数。|2590572|2590573|function+CustomWrapper(ele,+start,+end,+wrapper)+{
++var+len+=+ele.html().length;
++var+selectedText+=+ele.html().substring(start,+end);
++var+replacement+=+'<'%2Bwrapper%2B'>'%2BselectedText%2B'</'%2Bwrapper%2B'>';
++ele.html(ele.html().substring(0,+start)+%2B+replacement+%2B+ele.html().substring(end,+len));
}

var+secondEle+=+$("p:nth-child(2)");
+console.log(secondEle.html());
var+re+=+/<i>ba/g;
match+=+re.exec(secondEle.html());
+console.log(match.index+%2B+'-'+%2B+re.lastIndex);
CustomWrapper(secondEle,+match.index,+re.lastIndex,+'u');|2590574|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<test>
<p>baz+foobar</p><p>foo<i>bar</i></p>
</test>|2590575|2590576|这个样品包含了很多细节。如果你需要一些具体的解释，请询问。|2590577|entityMap|0|LINK|mutability|MUTABLE|url|https://api.jquery.com/wrapInner/|1|https://www.w3schools.com/js/js_htmldom.asp|2|http://flukeout.github.io/|3|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions^0|1Y|A|1Y|A|0|0|0|0|0|0|0|0|0|0|0|P|J|1|0|L|9|2|0|0|G|5|3|0|0|0|0|0|1W|D|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1Z|8|@$9|20|A|21|B|C]]|D|@$9|22|A|23|1|24]]|E|$]]|$1|F|3|G|5|6|7|25|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|26|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|27|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|28|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|29|8|@]|D|@]|E|$]]|$1|R|3|G|5|6|7|2A|8|@]|D|@]|E|$]]|$1|S|3|T|5|J|7|2B|8|@]|D|@]|E|$K|L]]|$1|U|3|V|5|J|7|2C|8|@]|D|@]|E|$K|L]]|$1|W|3|G|5|6|7|2D|8|@]|D|@]|E|$]]|$1|X|3|Y|5|6|7|2E|8|@]|D|@$9|2F|A|2G|1|2H]]|E|$]]|$1|Z|3|10|5|6|7|2I|8|@]|D|@$9|2J|A|2K|1|2L]]|E|$]]|$1|11|3|-4|5|6|7|2M|8|@]|D|@]|E|$]]|$1|12|3|13|5|6|7|2N|8|@]|D|@$9|2O|A|2P|1|2Q]]|E|$]]|$1|14|3|-4|5|6|7|2R|8|@]|D|@]|E|$]]|$1|15|3|16|5|17|7|2S|8|@]|D|@]|E|$]]|$1|18|3|19|5|17|7|2T|8|@]|D|@]|E|$]]|$1|1A|3|-4|5|6|7|2U|8|@]|D|@]|E|$]]|$1|1B|3|1C|5|6|7|2V|8|@$9|2W|A|2X|B|C]]|D|@]|E|$]]|$1|1D|3|G|5|6|7|2Y|8|@]|D|@]|E|$]]|$1|1E|3|1F|5|J|7|2Z|8|@]|D|@]|E|$K|L]]|$1|1G|3|1H|5|J|7|30|8|@]|D|@]|E|$K|L]]|$1|1I|3|G|5|6|7|31|8|@]|D|@]|E|$]]|$1|1J|3|1K|5|6|7|32|8|@]|D|@]|E|$]]|$1|1L|3|-4|5|6|7|33|8|@]|D|@]|E|$]]]|1M|$1N|$5|1O|1P|1Q|E|$1R|1S]]|1T|$5|1O|1P|1Q|E|$1R|1U]]|1V|$5|1O|1P|1Q|E|$1R|1W]]|1X|$5|1O|1P|1Q|E|$1R|1Y]]]]

<p>This can be easily done using CSS (or alternatively XPath) selectors and some JavaScript. To make things even easier, throw jQuery into the mix, to get access to methods like <a href="https://api.jquery.com/wrapInner/" rel="nofollow noreferrer"><code>.wrapInner</code></a>.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$("p:nth-child(2)").wrapInner("&lt;u&gt;&lt;/u&gt;");</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;test&gt;
&lt;p&gt;baz foobar&lt;/p&gt;&lt;p&gt;foo&lt;i&gt;bar&lt;/i&gt;&lt;/p&gt;
&lt;/test&gt;</code></pre>
</div>
</div>
</p>

<p>and here is an example using a CSS query selector in vanilla JS:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var wrapper = document.createElement("u");
var parent = document.querySelector("p:nth-child(2)");
var div = parent.appendChild(wrapper);
while(parent.firstChild !== wrapper)
    wrapper.appendChild(parent.firstChild);</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;baz foobar&lt;/p&gt;&lt;p&gt;foo&lt;i&gt;bar&lt;/i&gt;&lt;/p&gt;</code></pre>
</div>
</div>
</p>

<p>To get up to speed, here is a nice intro on that matter: <a href="https://www.w3schools.com/js/js_htmldom.asp" rel="nofollow noreferrer">JavaScript HTML DOM</a><br>
and here is a very nice and playful introduction to CSS selectors: <a href="http://flukeout.github.io/" rel="nofollow noreferrer">CSS Diner</a>.</p>

<hr>

<p>Regarding your specific request, if you insist on using <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions" rel="nofollow noreferrer">regex</a> here is an attempt to </p>

<ul>
<li>find the start and end position of the substring in question and </li>
<li>using a neat function to wrap the selected text with a tag of your choice.</li>
</ul>

<p>To make things a little more interesting, I search for a substring that does not start a position 0 of the selected text from the HTML fragment. Simply change the regex pattern or pass 0 as start index to the <code>CustomWrapper</code> function, if you like.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function CustomWrapper(ele, start, end, wrapper) {
  var len = ele.html().length;
  var selectedText = ele.html().substring(start, end);
  var replacement = '&lt;'+wrapper+'&gt;'+selectedText+'&lt;/'+wrapper+'&gt;';
  ele.html(ele.html().substring(0, start) + replacement + ele.html().substring(end, len));
}

var secondEle = $("p:nth-child(2)");
 console.log(secondEle.html());
var re = /&lt;i&gt;ba/g;
match = re.exec(secondEle.html());
 console.log(match.index + '-' + re.lastIndex);
CustomWrapper(secondEle, match.index, re.lastIndex, 'u');</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;test&gt;
&lt;p&gt;baz foobar&lt;/p&gt;&lt;p&gt;foo&lt;i&gt;bar&lt;/i&gt;&lt;/p&gt;
&lt;/test&gt;</code></pre>
</div>
</div>
</p>

<p>This sample contains a lot of nuts and bolts. Please ask if you need an explanation for something specific.</p>


<p>Is it possible to add formatting to html using JS (what can easily be done in Office editors)?</p>

<p>This is what I want to do:</p>

<pre><code>let htmString = "&lt;p&gt;baz foobar&lt;/p&gt;&lt;p&gt;foo&lt;i&gt;bar&lt;/i&gt;&lt;/p&gt;";
let reg = RegExp( "^fooba", "g" );
let htmModified = myFunction( htmString, reg, ["&lt;u&gt;", "&lt;\/u&gt;"] );
console.log( htmModified );
</code></pre>

<p><strong>Output:</strong></p>

<pre><code>&lt;p&gt;baz foobar&lt;/p&gt;&lt;p&gt;&lt;u&gt;foo&lt;/u&gt;&lt;i&gt;&lt;u&gt;ba&lt;/u&gt;r&lt;i/&gt;&lt;/p&gt;
</code></pre>

<p>(being after <code>&lt;p&gt;</code> is interpreted as the beginning of a line, thus only the 2nd <code>foobar</code> matches /^/)
<a href="https://i.stack.imgur.com/bBY7D.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bBY7D.jpg" alt="transformation"></a></p>


Is it possible to add formatting to html using JS regexes

jQuery

是否可以使用JS将格式添加到html中(在Office编辑器中可以轻松完成什么操作)？这就是我想要做的：let htmString = "<p>baz foobar</p><p>foo<i>bar</i></p>";let reg = RegExp( "^fooba", "g" );let htmModified = ...

问是否可以使用JS regexes将格式添加到html
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否可以使用JS regexes将格式添加到htmlEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否可以使用JS regexes将格式添加到html
EN