用于捕获标记的正则表达式

Regular expression to capture a tag

本文关键字：正则表达式 用于      更新时间：2023-09-26

我有以下html文本，在javascript中，我需要捕获所有具有类"分页符"的标签"p"，然后将其替换为任何文本。

我需要使用正则表达式，因为这个 html 文本将像文本一样处理不像 DOM estrucutre 

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent pellentesque tincidunt adipiscing</p>
<p class="page-break">break</p>
<p>Suspendisse a velit at diam facilisis
egestas sit amet a lectus.</p>
<p class="page-break">other</p>
<p>Donec tristique placerat massa vitae hendrerit. Maecenas nec
massa adipiscing sem venenatis vehicula. Suspendisse mattis pretium
libero quis dignissim. Nulla volutpat imperdiet vehicula. Donec ut
tristique neque.</p>

阻止我使用 dom 解析器的是，我计划插入一个无效的 html 元素，我计划将以前的 HTML 转换为此元素，我需要像文本一样解析 firt 以跳过 html 验证，然后像这样粘贴它

 <div class="pag visible">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Praesent pellentesque tincidunt adipiscing</p>
 </div>
 <div class="pag">   
    <p>Suspendisse a velit at diam facilisis
    egestas sit amet a lectus.</p>
 </div>
 <div class="pag">   
    <p>Donec tristique placerat massa vitae hendrerit. Maecenas nec
    massa adipiscing sem venenatis vehicula. Suspendisse mattis pretium
    libero quis dignissim. Nulla volutpat imperdiet vehicula. Donec ut
    tristique neque.</p>
 </div>

如您所见，每个".page-break"都替换了IR

不要使用正则表达式来解析 HTML。请改用 DOM。如果您有纯字符串，请创建一个DocumentFragment并将其分配给其.innerHTML以获取 DOM。

使用getElementsByTagName找到您的p标签，检查其.className并采取相应措施。

// your content
var content = '<p>Lorem ips...';
// to match any <p> with correspondent class
var regex = /(<p class.?=.?"page-break">.*<'/p>)+/g;
// to replace it with whatever you need:
content.replace(regex, "<p>MY TEXT HERE</p>");

例

你有没有想过使用 JQuery？

$('p').hasClass('page-break').html('replacement value goes here');

这会将<p>的内容替换为"重置值在这里"

或者$('p').hasClass('page-break').remove();将完全删除<p>元素。

不建议使用正则表达式解析 HTML。可以使用 XPath 提取具有指定条件的所有<p>，并循环访问返回的列表并更新每个<p>的textContent，如下面的代码片段所示。

var pList = document.evaluate("//p[@class='page-break']", document, null, XPathResult.ANY_TYPE, null);   
var item = pList.iterateNext();  
while (item) {  
    item.textContent = "New Text";
    item = pList.iterateNext();  
}

解释

//p[@class='page-break']将使用class='page-break'获取所有<p>元素。 document.evaluate函数将返回类型为 XPathResult 的对象。使用interateNext()函数，您可以获取其元素。您可以使用textContent属性设置新文本。

相关文章：