javascript - jquery 中使用 <p> 标签包裹内容，而不是使用 &lt;header&gt; 标签包裹内容

Question

在编辑器中，如果用户键入内容并希望使用“p”标签包装内容，而该标签在 jquery keyup 事件中不使用 header 标签包装。

例如

<h1>Header1</h1>
Test content Test content Test content 
<h3>Header3</h3>
<h2>Header2</h2>
New content New content New content
<br/>
<br/>
<h4>Header4</h4>

生成的 html:

<h1>Header1</h1>
<p>Test content Test content Test content </p>
<h3>Header3</h3>
<h2>Header2</h2>
<p>New content New content New content</p>
<p></p>
<p></p>
<h4>Header4</h4>

Answer 1

如果您的 HTML 标记包含在 <div> 内例如:

<div id="content">
    <h1>Header1</h1>
    Test content Test content Test content       
    <h3>Header3</h3>
    <h2>Header2</h2>
    New content New content New content
    <br/>
    <br/>
    <h4>Header4</h4>
</div>

然后你可以使用.contents() 和 .filter() 完成你的任务:

$('#content').contents().filter(function() {
    return this.nodeType === 3 && $.trim(this.nodeValue).length;
}).wrap('<p />');

<强> Fiddle Demo