js正则表达式：替换不在span标签中的单词

问题描述

例如：

  var htmlString =这是< span title ='mark'>美好的一天< / span>以及< span title ='>阳光灿烂的日子< / span>，这是冲浪的日子。; 
  

想用night替换最后两个单词day，并跳过第一个单词标记跨度标题标记。

  var replaceString =day; 
 var reg = new RegExp（（？！title = \''mark \'>）。*+ replaceString +。*（？！< \ / span>），gi ）
 var bb = htmlString.replace（reg，night）; 
 alert（bb）
 
 //我不能用上面的代码得到正确的结果
 //最终结果想要：这是一个< span title ='mark' >美好的一天< / span>以及< / span title ='>阳光明媚的夜晚< / span>，这是冲浪的夜晚。 
  

更新：以下作品，但仅在一个句子中匹配3个日期，如何制作匹配不确定数字的日？

  alert（htmlString.replace（/（< span。*？'（?! （*。< \ / span>）|（！！>）day / gi，$ 1night $ 2））; 
  

谢谢。

解决方案

以下是您如何通过基于DOM的方法实现该功能：

function textNodesUnder（el）{var n，步行= document.createTreeWalker（EL，NodeFilter.SHOW_TEXT，NULL，FALSE）; while（n = walk.nextNode（））{if（n.parentNode.nodeName.toLowerCase（）！=='span'||（n.parentNode.nodeName.toLowerCase（）==='span'&& n.parentNode.getAttribute（title）！=='mark'））n.nodeValue = n.nodeValue.replace（/ \bday\b / g，night）; } return el.firstChild.innerHTML;} function replaceTextNotInSpecificTag（s）{var doc = document.createDocumentFragment（）; var wrapper = document.createElement（'myelt'）; wrapper.innerHTML = s; doc.appendChild（wrapper）; return textNodesUnder（doc）;} var s =这是一个< span title ='标记'>美好的一天< / span>还有一个< span title ='>晴天< / span>为< span>冲浪日< / span>。; console.log（replaceTextNotInSpecificTag（s））;

结果：

这是< span title =mark>美好的一天<跨度>还有一个< span title =>< / code>< / p>< span"< span"< / span> $ b

首先，我们创建一个文档片段，然后创建一个元素 myelt ，然后将它作为子元素附加到文档片段，从而允许我们访问DOM节点一个dom解析器。然后，使用 document.createTreeWalker 和 SHOW_TEXT 过滤器我们可以访问所有文本节点。我们遍历节点，如果节点名称不是跨度，或者它是一个标题属性值不等于标记的跨度标记，我们执行搜索并替换。

For example:

var htmlString = "It's a <span title='mark'>nice day</span> and also a <span title=''>sunny day</span>, it's day for surfing.";

want to replace the last two words "day" with "night", and skip the first one with tag span title "mark".

var replaceString = "day";
var reg=new RegExp("(?!title=\'mark\'>).*"+replaceString+".*(?!<\/span>)","gi")
var bb=htmlString.replace(reg,"night");
alert(bb)

// I can not get the right result with the above code
// Final result wanted: "It's a <span title='mark'>nice day</span> and also a <span title=''>sunny night</span>, it's night for surfing.";

UPDATE: the following works, but only matches 3 "day" in a sentence, how to make it match uncertain numbers of "day"?

alert(htmlString.replace(/(<span.*?'(?!mark)'>.*?)day(.*?<\/span>)|(?!>)day/gi, "$1night$2"));

Thanks.

解决方案

Here is how you can achieve that with a DOM-based approach:

function textNodesUnder(el){
  var n, walk=document.createTreeWalker(el,NodeFilter.SHOW_TEXT,null,false);
  while(n=walk.nextNode())
  {
       if (n.parentNode.nodeName.toLowerCase() !== 'span' ||
          (n.parentNode.nodeName.toLowerCase() === 'span' &&
           n.parentNode.getAttribute("title") !== 'mark'))
      		n.nodeValue =  n.nodeValue.replace(/\bday\b/g, "night");
  }
  return el.firstChild.innerHTML;
}

function replaceTextNotInSpecificTag(s) {
  var doc = document.createDocumentFragment();
  var wrapper = document.createElement('myelt');
  wrapper.innerHTML = s;
  doc.appendChild( wrapper );
  return textNodesUnder(doc);
}

var s = "It's a <span title='mark'>nice day</span> and also a <span title=''>sunny day</span>, it's day for <span>surfing day</span>.";
console.log(replaceTextNotInSpecificTag(s));

Result:

It's a <span title="mark">nice day</span> and also a <span title="">sunny night</span>, it's night for <span>surfing night</span>.

First, we create a document fragment, then create an element myelt, then append it as a child to the document fragment allowing us to access the DOM nodes with a dom parser.

Then, using document.createTreeWalker with SHOW_TEXT filter we get access to all text nodes. We walk the nodes, and if the node name is not span or if it is a span tag with a title attribute whose value is not equal to "mark", we perform a search and replace.

这篇关于js正则表达式：替换不在span标签中的单词的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！