javascript - 仅用 RegEx 替换字符串中的外部标记

Question

我有一个字符串，其中可以显示一些 html 标签，例如

this is a nice day for bowling <b>bbbb</b>

如何用 RegExp 替换所有 b 符号，例如，用 :blablabla: (例如)但 ONLY 在 html 标签之外？

所以在那种情况下，结果字符串应该变成

this is a nice day for :blablabla:owling <b>bbbb</b>

编辑:根据我收到的答复，我想更具体一些。所以首先我只有一个字符串，而不是 DOM 元素或其他任何东西。该字符串可能包含也可能不包含标签(开始和结束)。主要思想是能够替换文本中除了内部标签之外的任何地方。例如，如果我有一个像

这样的字符串

not feeling well today :/ check out this link <a href="http://example.com">http://example.com</a>

正则表达式应该用真正的笑脸图像替换仅第一个:/，但不应该替换第二个和第三个，因为它们在标签内(和标签的一部分)。这是一个使用其中一个答案中的正则表达式的示例片段。

var s = 'not feeling well today :/ check out this link <a href="http://example.com">http://example.com</a>';
var replaced = s.replace(/(?:<[^\/]*?.*?<\/.*?>)|(:\/)/g, "smiley_image_here");
document.querySelector("pre").textContent = replaced;

<pre></pre>

奇怪的是DEMO显示它捕获了正确的组，但替换函数中的相同正则表达式似乎不起作用。

Answer 1

用 :blablabla: 替换所有 b 的正则表达式本身并不难:

.replace(/b/g, ":blablabla:")

获取我们需要执行搜索和替换的文本节点有点棘手。

这是一个基于 DOM 的示例:

function replaceTextOutsideTags(input) {
  var doc = document.createDocumentFragment();
  var wrapper = document.createElement('myelt');
  wrapper.innerHTML = input;
  doc.appendChild( wrapper );
  return textNodesUnder(doc);
}
function textNodesUnder(el){
  var n, walk=document.createTreeWalker(el,NodeFilter.SHOW_TEXT,null,false);
  while(n=walk.nextNode())
  {
       if (n.parentNode.nodeName.toLowerCase() === 'myelt')
      		n.nodeValue =  n.nodeValue.replace(/:\/(?!\/)/g, "smiley_here"); 
  }
  return el.firstChild.innerHTML;
} 

var s = 'not feeling well today :/ check out this link <a href="http://example.com">http://example.com</a>';
console.log(replaceTextOutsideTags(s));

在这里，我们只修改作为名为 myelt 的自定义创建元素的直接子元素的文本节点。

结果:

not feeling well today smiley_here check out this link <a href="http://example.com">http://example.com</a>