Question

我试图仅隐藏正在显示的文档中的名称。例如说我在html.erb文件中：

<span class="demo-text">My name is Mike and there are seven more people with name Mike in this building </span>

现在，我只希望在整个文本中将名称“ Mike”删掉。以下是我未完成的尝试：

.css文件

 .demo-text {

}

 .index-pg {
   color: black;
   background: black;
   height: 20px;
 }

jquery文件：

$(".demo-text").addClass('index-pg') ;

我实际上是使用按钮来添加或删除“ index-pg”类，以便我可以控制何时必须删除名称。添加和删除类部分工作正常。我在使用jquery进行编码时遇到问题，它会遍历各个单词并查找所有名称“ Mike”，并且仅将类应用于该关键字。

Answer 1

您可以简单地添加以下jquery。

jQuery(document).ready(function(){
    var str = jQuery(".demo-text").text();

  var res = replaceAll(str,'Mike','');

    jQuery(".demo-text").text(res);
});


function replaceAll(str, find, replace) {
    return str.replace(new RegExp(find, 'g'), replace);
}

这是工作示例：https://jsfiddle.net/manektech/37p5y2jk/5/

Answer 2

您可以在span文本内循环，并以keyword的{{1}}来包装span。

class

var keyWord = 'Mike';
var replaceMent = "<span class='index-pg'>" + keyWord + "</span>";
$(".demo-text").each(function() {
  var txt = $(this).text();
  var regex = new RegExp("\\b" + keyWord + "\\b", "gi");
  txt = txt.replace(regex, replaceMent);
  $(this).html(txt);
});

.demo-text {}

.index-pg {
  color: red;
  background: black;
  height: 20px;
}

Answer 3

你去哪里

rescue StandardError => e
  raise e.class
end
*** ArgumentError Exception: wrong number of arguments (given 0, expected 2)

Answer 4

您可以遍历所有demo-text类，并检查其文本中是否包含Mike。如果有，则可以按如下所示添加类：

$(".demo-text").each(function(e){
   let currentText = $(this).text();
   if (currentText.indexOf('Mike') >= 0) {
       $(this).text().replace(/Mike/g, "<span class='index-pg'>Mike</span>"));
   }
});

希望它对您有帮助。

Answer 5

为名称添加另一个跨度

<span class="demo-text">My name is <span class="name-text">Mike</span> and there are seven more people with name Mike in this building </span>

.css文件

.demo-text {

}
.name-text.index-pg {
  display:none;
 }

您正在使用按钮添加或删除“ index-pg”类，以便仅向该关键字（Mike）添加/删除类。

$(".name-text").addClass('index-pg') ;
$(".name-text").removeClass('index-pg') ;

仅使用jquery将css样式应用于关键字

5 个答案: