Question

我试图在文档中找到//（斜杠）并用span包装它。

我试过

var slashes = "//";
/slashes+/

所以输出应该是：

Hello There! I Am <span class="slashes">//</span> An Alien

使用jQuery .replace()和:contains但没有任何反应，而且我是reuler表达式的新手，无法正确执行此操作。我该怎么做？

编辑：我尝试了什么： Solution for this question无效：

function slashes($el) {

   $el.contents().each(function () {
       dlbSlash = "//";
       if (this.nodeType == 3) { // Text only
           $(this).replaceWith($(this).text()
               .replace(/(dlbSlash)/gi, '<span class="slashes">$1</span>'));
       } else { // Child element
           slashes($(this));
       }

   });
}

slashes($("body"));

Answer 1

你需要逃避正则表达式中的斜杠。尝试

var mystring = "adjfadfafdas//dsagdsg//dsafda"
mystring.replace(/\/\//g,'<span class="slashes">\/\/</span>');

应输出

"adjfadfafdas<span class="slashes">//</span>dsagdsg<span class="slashes">//</span>dsafda"

如果要替换h2和p标签中的斜杠，可以像这样循环遍历它们：

$('h2, p').each(function(i, elem) { 
    $(elem).text(
        $(elem).text().replace(/\/\//g,'<span class="slashes">\/\/</span>'));
});

但这会吹走你的p和h2标签中可能有的任何其他html标签。

Answer 2

这是另外一种方法

//Find html inside element with id content
var html = $('#content').html();
//Replace // with <span style='color:red'>//</span>
html = html.replace(/\/{2}/g,"<span style='color:red'>$&</span>");
//Return updated html back to DOM
$('#content').html(html);

这是demo

Answer 3

我认为你在寻找合适的地方。唯一要解决的是你的正则表达式：

.replace(/\/\//g, '<span class="slashes">$1</span>'));

关注文本节点（类型3）非常重要，而不是全局替换可能会破坏页面的body innerHTML。

Answer 4

如果您只想将这种替换应用于单//，请使用

mystring = mystring.replace(/(\/{2})/g, "<span class=\"slashes\">$1</span>");

但是，如果要将其应用于2个或更多斜杠，请使用

mystring = mystring.replace(/(\/{2,})/g, "<span class=\"slashes\">$1</span>");

但是如果你想将它应用于任何数量的斜杠（例如//，////等），那么你需要使用

mystring = mystring.replace(/((?:\/{2})+)/g, "<span class=\"slashes\">$1</span>");

测试代码here。

查找字符并用HTML包装

4 个答案: