Question

我有以下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元素我计划将previus 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

Answer 1

Don't use regexp to parse HTML。请改用DOM。如果您有普通字符串，请创建一个DocumentFragment并将其分配给.innerHTML以获取DOM。

使用getElementsByTagName查找p代码，检查他们的.className并采取相应行动。

Answer 2

您是否考虑过使用JQuery？

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

这会将的内容替换为“替换值在这里”

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

Answer 3

不建议使用正则表达式解析HTML。您可以使用XPath获取具有指定条件的所有并迭代返回的列表并更新每个textContent的{{1}}，如下面的代码段所示。

<p>

<强>解释

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'函数将返回类型为document.evaluate的对象。使用XPathResult函数可以获得它的元素。您可以使用interateNext()属性设置新文本。

Answer 4

// 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>");

Example

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

4 个答案: