Question

我正在尝试使用RegExr删除按钮周围的包装器，但是它返回空值。

我使用了this问题的解决方案，就像这样：

var title = $( ".redButton" ).text();
var myString = $( "#content" ).html();
var myRegexp = /(<p>\s<button class"redButton">)((?:\s|.{1,50})*)(<.button>\s<.p>)/g;
var match = myRegexp.exec(myString);

console.log(match);

所以我最终可以打开它：

<article id="content">
    <p>
        <button class="redButton">EEN HELE LANG TITEL IN EEN KNOP</button>
    </p>
</article>

对此：

<article id="content">
        <button class="redButton">LONG TITLE IN A BUTTON</button>
</article>

在我继续之前，我想检查一下RegEx是否有效，但显然没有。 This解决方案可以使用转义符解决此问题，但是我不知道何时应该，何时不应该逃脱。

有人可以帮忙吗？

Answer 1

正则表达式和HTML通常不能很好地协同工作。为什么不使用DOMParser呢？将字符串解析为文档，将button附加到article，然后删除p：

const htmlStr = `<article id="content">
    <p>
        <button class="redButton">EEN HELE LANG TITEL IN EEN KNOP</button>
    </p>
</article>`;
const doc = new DOMParser().parseFromString(htmlStr, 'text/html');
const button = doc.querySelector('.redButton');
const parentToRemove = button.parentElement;
const ancestorToAppendTo = parentToRemove.parentElement;
ancestorToAppendTo.appendChild(button);
parentToRemove.remove();
console.log(doc.body.innerHTML);

这会将按钮添加到父母的父母，并将其从HTML中删除。

父母。

Answer 2

如果只想删除元素的直接父级，请使用jQuery方法unwrap。运行该代码段，然后检查devtools中的按钮，您将看到段落标签已被删除。

const $button = $('#content .redButton');
$button.unwrap();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article id="content">
  <p>
    <button class="redButton">EEN HELE LANG TITEL IN EEN KNOP</button>
  </p>
</article>

RegEx执行后返回null？

2 个答案: