查找字符并用 HTML 换行答案

【问题标题】：Find Characters and wrap with HTML查找字符并用 HTML 换行
【发布时间】：2012-09-19 17:34:45
【问题描述】：

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

我试过了

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

所以输出应该是：

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

使用 jQuery .replace() 和 :contains 但没有任何反应，而且我对调节器表达式不熟悉，可以正确执行此操作。我该怎么做？

编辑：我尝试了什么： 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"));

【问题讨论】：

哦，哇，g'luck，这需要在索引值和 blah blah blah .... g'luck 中进行字符搜索和替换！
正则表达式是 /\/\//g，但它需要的不仅仅是简单的 .replace。
如何在 jsfiddle.net 上分享您当前的尝试？
如果使用外部字符串构建正则表达式，则需要对文本进行双重转义，然后构建显式 RegExp 对象。

标签： javascript jquery html regex

【解决方案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 标记。

【讨论】：

如果有帮助，斜线旁边不会有任何字符。
那么我将如何对整个文档执行此操作？主要在h2和p元素中
$('h2, p').each(function(i, elem) { $(elem).text($(elem).text().replace(/\/\// g,'\/\/')); });
选择每一个并循环遍历它们是最安全的方法。
使用此方法，HTML 呈现为文本并显示在页面上。

【解决方案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

【讨论】：

【解决方案3】：

我认为你找对地方了。唯一需要修复的是你的正则表达式：

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

关注文本节点（类型 3）很重要，而不是对可能破坏页面的正文 innerHTML 进行全局替换。

【讨论】：

【解决方案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。

【讨论】：