我正在处理我无法控制的提要。我需要用<div>替换许多标题中每个标题中的前半个竖线字符。

<h3>New Clause 12 - Monitoring tool | Order | Committees</h3>

更改为

<h3>New Clause 12 - Monitoring tool</h3><div> Order | Committees </div>

这个脚本可以工作，但它替换了|的所有示例，并用第一个标题的内容替换了页面上每个h3的全部内容。如何将脚本的范围限制为只影响第一个|，而不更改标题文本内容？

jQuery('h3').html(jQuery('h3').html().replace('|', "</h3><div>"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>New Clause 12 - Monitoring tool | Order | Committees</h3>