如何将格式应用于多个 div 上的文本区域。

Question

我有以下 html。

<div>this is line 1 {start-hidden}</div>
<div>this is line 2</div>
<div>{end-hidden} this is line 3</div>

我希望 {start-hidden} 和 {end-hidden} 之间的文本不可见。我怎样才能做到这一点？请注意，“开始隐藏”和“结束隐藏”可能位于不同的位置。它是一些额外的标记。

我需要一些花哨的正则表达式还是使用服务器端 DOM 操作会更好？

谢谢。

---

我使用的解决方案（使用 PHP）（对于那些感兴趣的人）：

正则表达式提取 {start-hidden} 和 {end-hidden} 内的所有文本 (+html) [将此部分称为 $inner] 以及 [$pre] 之前和 [$post] 它之后的所有文本.

preg_match('#^(.*?){start-hidden}(.*?){end-hidden}(.*?)$#is', $source, $matches)

然后删除 $inner 中新行的任何原因。也只删除那些带有结束标签的。

// attempt to remove all sources of new lines
$inner = preg_replace('#<br([^>])*>#is', '', $inner);
$inner = preg_replace('#<div([^>])*>(.*?)</div>#is', '', $inner);
$inner = preg_replace('#<p([^>])*>(.*?)</p>#is', '', $inner);

然后我们找到每个剩余的标签和前缀 并附加 。

$inner = preg_replace('#(<[^>]+>)#is', '</span>${1}<span class="hidden">', $inner),

然后在 $inner 前面加上 并附加

$inner = '<span class="hidden">' . $inner . '</span>';

最后将它们重新组合在一起（如果可以再次 preg_match() 则重复）。

$source  = $pre;
$source .= $inner;
$source .= $post;

Answer 1

{start-hidden} 和 {end-hidden} 必须在 and 标记内吗？ 坚持 html 会建议使用类似的东西（像你的建议那样让样式“破坏” div 是没有意义的）：

<div>this is line 1</div>
<div style="display:none;">this is line 2</div>
<div>this is line 3</div>

或者，正如 gred 所建议的那样：

<div>this is line 1</div>
<div style="visibility:hidden;">this is line 2</div>
<div>this is line 3</div>

编辑：看看display:none 和visibility:hidden:w3schools on display vs. visibility 之间的区别很重要

Answer 2

使用跨度：

<div>this is line 1 <span style="visibility:hidden;">{start-hidden}</span></div>
<div>this is line 2</div>
<div><span style="visibility:hidden;">{end-hidden}</span> this is line 3</div>