javascript或css：如何隐藏标签内的文本中的任何数字，后跟点前缀“1.text”，“2.text”...“30.text”

Posted 2023-02-22

【中文标题】javascript或css：如何隐藏标签内的文本中的任何数字，后跟点前缀“1.text”，“2.text”...“30.text”

【英文标题】：javascript or css: How to Hide any Number followed by dot Prefix "1.text", "2.text"..."30.text" from a Text inside a Label

【发布时间】：2016-04-29 18:56:41

【问题描述】：

我想用 javascript 或 css 隐藏标签内文本中的所有（数字后跟点）前缀。 隐藏“1.”、“2.”...“30.”来自“1.text”、“2.text”...“30.text”来自标签的文本。

html
<li>
<label class="layered_nocolor">
1.alpha
</label>
</li>
<li>
<label class="layered_nocolor">
2.beta
</label>
</li>
<li>
<label class="layered_nocolor">
30.gama
</label>
</li>

我希望我的页面显示不带前缀的文本

α 测试版 伽马

【参考方案1】：

您将无法使用 CSS OR Javascript 隐藏任何内容。你将需要他们两个。您将不得不使用 CSS 来隐藏标签并使用 Javascript 来动态更改标签的样式。首先，创建一个名为 hide 的 CSS 类：

.hide
   display: none;
 

然后，在您的 HTML 中，您将添加以下脚本：

// Gets all your HTML element with the class "layered_nocolor".
var labels = document.getElementsByClassName("layered_nocolor");
// The regex pattern you want to hide. It means "one or more digit before a dot".
var pattern = "(/d+\.)";
// Iterates all the elements you got from before. 
for(int i = 0; i < labels.length; i++)
  // If your label match the regex pattern you change the class hiding it.
  if(labels[i].innerHTML.match(pattern) != null)
    labels[i].class = "layered_nocolor hide";
  

编辑

经过您的解释，这是您要查找的代码：

// Gets all your HTML element with the class "layered_nocolor".
var labels = document.getElementsByClassName("layered_nocolor");
// The regex pattern you want to hide. It means "one or more digit before a dot".
var pattern = "(/d+\.)";
// Iterates all the elements you got from before. 
for(int i = 0; i < labels.length; i++)
  // If your label match the regex pattern you replace the text with "" to remove it.
 (labels[i].innerHTML.replace(pattern, "");

编辑 2

如果您使用 jQuery，这是最好的方法：

$(".layered_nocolor").html(function(i, oldhtml)return oldhtml.replace(/\\d+\\./, ""););

双“\”很重要，因为如果您只插入一次，它将被用作转义字符而不是文字。

【讨论】：

谢谢回答！我不想隐藏类，只有文本中的前缀我仍然希望文本可见我只想看到没有前缀的 alpha beta gama

然后，只需将您可能想要隐藏的文本包装到 中，并为该跨度指定一个类。代码将是相同的，您只需将“layered_nocolor”类更改为新的类名。

我无法编辑 html，文本来自 prestashop 过滤器，我在名称上添加了前缀，因此我可以在值中自定义顺序，而不是按名称。现在我想隐藏前缀，这样客户就看不到它们了。

应该有一个类似于这个例子的方法：当它包含我使用的文本“design”时，我想隐藏整个过滤器 $("#filter_name td:contains('design')" ).parent("tr").hide();但现在我只想在文本中隐藏过滤器的前缀，所以只有文本是可见的，就像我说的，可以说过滤器的值是 1.alpha 2.beta 我只想在过滤器值中看到 alpha beta跨度>

sry 伙计们，这不起作用可能是因为我没有提到 html 中的文本是用引号引起来的“1.alpha”，但在站点中它们是不可见的。我没有提到它们，因为我认为您可以提供给我的代码只是找到前缀并将其隐藏起来，因为不清楚。这是我的网站，它是希腊语。 aurorahome.gr/13-sentonia 你能看看过滤器“Διάσταση”的实际 html，而不是我给你的蹩脚例子。很抱歉，伙计们

【参考方案2】：

您需要使用 Javascript 将文本拆分为单独的 span，以便隐藏包含数字前缀的 span。

$(".layered_nocolor").html(function(i, oldhtml) 
  return oldhtml.trim().replace(/^\d+\./, '<span class="hide">$&</span>');
);

.hide 
  display: none;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <label class="layered_nocolor">
      1.alpha
    </label>
  </li>
  <li>
    <label class="layered_nocolor">
      2.beta
    </label>
  </li>
  <li>
    <label class="layered_nocolor">
      30.gama
    </label>
  </li>
</ul>

【讨论】：

sry 伙计们，这不起作用可能是因为我没有提到 html 中的文本是用引号引起来的“1.alpha”，但在站点中它们是不可见的。我没有提到它们，因为我认为您可以提供给我的代码只是找到前缀并将其隐藏起来，因为不清楚。这是我的网站，它是希腊语。 aurorahome.gr/13-sentonia 你能看看过滤器“Διάσταση”的实际 html，而不是我给你的蹩脚例子。很抱歉，伙计们

基本思路还是一样的。只需调整正则表达式以匹配您的实际代码。

那么，您需要学习或雇用某人。所以不是免费的编码服务。我们在这里帮助程序员修复他们的代码，而不是为他们做。

对不起。但是，您在没有经过必要教育的情况下尝试创建网站，这不是我们的问题。

我知道，但我仍然必须尝试并通过这样做来学习。实际上它已经完成了，除了一些小细节或由于我的无知而完全错过的一些大事