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

Question

我想用 javascript 或 css 隐藏标签内文本的所有（数字后跟点）前缀。隐藏“1.”、“2..”...“30.” from "1.text", "2.text"..."30.text" from the texts of a Label.

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>

我希望我的页面显示没有前缀的文本

alpha
beta
gama

Answer 1

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

的 CSS class

.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+\./, "");});

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

Answer 2

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

$(".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>

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

html

javascript

css

prefix

hide