☰

替换 html 标签

tag-icon • tag-icon notepad++
替换 html 标签

我有这个 HTML 标签：<span class="text_obisnuit"></span>我必须将其改为<p class="text_obisnuit"></p>

</p>
        <span class="text_obisnuit"> I must choose</em>"  between normal and pathological,  which most of the times is equivalent with  the collapse.</span>

必须成为：

</p>
        <p class="text_obisnuit"> I must choose</em>"  between normal and pathological,  which most of the times is equivalent with  the collapse.</p>

我创建了一个正则表达式，但我不知道为什么它不起作用：

搜索：</p>\s+.*\K<span class="text_obisnuit">.*(</span>)

替换为：<p class="text_obisnuit">$1</p>

此外，正则表达式不能查找和替换这种行，只能查找和替换第一种情况。

<p><span class="text_obisnuit2">* Goe:</span><span class="text_obisnuit"> Sansy - <em>Must Heva/em>, Publishing House, 1986.</span><br/></p>

答案1

您的模式仅捕获此组(</span>)，而不是内容。这就是为什么替换时它无法按预期工作的原因。请尝试以下操作：

  • 找什么：</p>\s+.*\K<span class=("text_obisnuit">.*)</span>
  • 用。。。来代替：<p class=$1</p>
  • 检查环绕

答案2

是的，我知道我的错误是什么，所以这会有所帮助。

搜索：(?-s)</p>\s+.\K(<span class="text_obisnuit">)(.*)(</span>)

替换为：<p class="text_obisnuit">\2</p>

答案3

这是对 RegEx 的极其糟糕的使用。

看看这个著名的答案，为什么

为什么这不好？因为 HTML 标签可以嵌套。RegEx 根本无法在贪婪或非贪婪模式下定位正确的标签组。

或者，使用 CSS 解决方案，如果您的目标是标签的显示布局问题<span>，请使用此 CSS 使您的<span>显示为块元素：

span.text_obisnuit { display: block; }

以下是我认为 RegEx 不是一个好主意的理由。

如果 HTML 足够简单，可以手动验证，则只需单击两个跨度并手动更改即可。

如果它足够复杂以至于需要使用 RegEx，您将无法验证它，因为嵌套太多，而这正是 RegEx 不合适的用例。使用 RegEx 解析 HTML 自动获得错误答案。

马上，我能想到的有两种失败情况：

  • 嵌套<span>标签
  • <span>同一行上没有结束标记的标签（HTML 不呈现回车符）

实际解决方案JSFiddle 链接

$("span.text_obisnuit").each(function(){$(this).replaceWith($('<p class="text_obisnuit">' + this.innerHTML + '</p>'));});

在此处输入图片描述

假设您的<span>标签命名一致，这是更改标签的 100% 万无一失的方法，因为它使用的是实际的 HTML 解析器。

如果您需要复制 HTML，请在 Chrome 中打开 JSFiddle 页面，检查 JSFiddle 的输出区域（白色背景），然后查找 HTML 代码。使用Copy Element外部div获取所有内容，然后粘贴到编辑器中。输出文本将如下所示：

<div>
<p class="text_obisnuit">Some Text</p>

<p class="text_obisnuit">Some <span>Nested</span> Text</p>

<p class="text_obisnuit">Mutliline
Text</p>
</div>

相关内容