Question

实施例

REGEX：

.replace(/((<)(\/|)([a-zA-Z-Z0-9]+))/gi,'\n$1')

What does this do?

INPUT：

<div id="page"><div id="header"><h1><a href="#">Burger Pointer</a></h1><ul class="left"><li><a href="#">Menu</a></li><li><a href="#">Location</a></li><li><a href="#">About Us</a></li><li><a href="#">BP Gear</a></li></ul></div></div>

输出：

<div id="page">
<div id="header">
<h1>
<a href="#">Burger Pointer
</a>
</h1>
<ul class="left">
<li>
<a href="#">Menu
</a>
</li>
...

问题

有没有办法检查第1组，第4个捕获组是否a|h1|etc...使用正则表达式，因此输出将是：

<div id="page">
<div id="header">
<h1><a href="#">Burger Pointer</a></h1>
<ul class="left">
<li>
<a href="#">Menu</a>
</li>
...

进步

目前无法使用，请参阅示例here

.replace(/(<|<\/)([a-zA-Z-Z0-9]+)/gi,function($0, $1, $2) {
   if (["h1","a"].indexOf($2)) {
      return "$0"
    } else {
        return "/n$1$2"
    }
})

Answer 1

如果我已正确理解您的问题，您希望删除某些代码元素内的换行符。正确执行此操作的一种方法是将其转换为HTML然后操纵标记。为此，您可以创建一个临时HTML元素并将HTML注入其中。

您会注意到，除了删除换行符之外，此方法还会关闭您的div代码，因为您提供的HTML无效。

这不是一个完整的解决方案或整洁的架构，只是对如何解决这类问题的概念的证明。

提供纯javascript和jquery版本（因为即使你没有jquery代码也指定了jquery）。要了解各个命令的作用，请在jquery文档或MDN参考中阅读它们。

<强>的jQuery

var temporaryElement = $("<body />").html(inputString);

temporaryElement.find("h1, a").each(function() {
    $(this).html($(this).html().replace(/\n/g, "")));
}

console.log(temporaryElement.html());

纯Javascript

var inputString = `<div id="page">
<div id="header">
<h1>
<a href="#">Burger Pointer
</a>
</h1>
<ul class="left">
<li>
<a href="#">Menu
</a>
</li>`;

function removeLinebreaksInTag(parent, tagName) {
    var elements = parent.getElementsByTagName(tagName);
    for (var i = 0 ; i < elements.length ; i++) {
        elements[i].innerHTML = elements[i].innerHTML.replace(/\n/g, "");
    }
}

function cleanUpHtml(html) {
    var temporaryElement = document.createElement("body");
    temporaryElement.innerHTML = html;

    removeLinebreaksInTag(temporaryElement, "h1");
    removeLinebreaksInTag(temporaryElement, "a");

    return temporaryElement.innerHTML;
}

console.log(cleanUpHtml(inputString));

Answer 2

从您的示例中，您需要

捕获<a> <h1>代码，但不抓住</a>和</h1>代码（因为在您的输出中，<h1>和{{{{}之前有换行符1}}标签。

您可以使用Negative Lookahead实现目标。

正则表达式是<a>

您可以找到演示here

输入

(?!<\/a|<\/h1)((<)(\/|)([a-zA-Z-Z0-9]+))

输出

<!-- Comments Testing -->
<div id="page"><div id="header"><h1><a href="#">Burger Pointer</a></h1><ul class="left"><li><a href="#">Menu</a></li><li><a href="#">Location</a></li><li><a href="#">About Us</a></li><li><a href="#">BP Gear</a></li></ul></div></div>

问题是它还会在 <div id="page"> <div id="header"> <h1> <a href="#">Burger Pointer</a></h1> <ul class="left"> <li> <a href="#">Menu</a> </li> <li> <a href="#">Location</a> </li> <li> <a href="#">About Us</a> </li> <li> <a href="#">BP Gear</a> </li> </ul> </div> </div>标记内捕获<a>。由于javascript不支持lookbehinds，我无法找到消除这些匹配的方法。

如果您想要否定所有<h1>和<a>标记，就像您在问题中提到的那样，那么您可以尝试使用此正则表达式<h1>

此输出为

((<)(\/|)(?!a|h1)([a-zA-Z0-9]+))

您可以找到演示here

jQuery正则表达式 - 替换除非条件？

实施例

问题

进步

2 个答案: