围子串入跨度使用的JavaScript与string.replace

Question

我有这样的代码

var rxp = new RegExp("(([0-9]+\.?[0-9]+)|([0-9]+))", "gm"); 
 
var str = '<div id="rep"> asd 123 asd <span class="new">123</span> asd 123 asd <span class="light">123</span> </div>'; 
 
str.replace(rxp, "<span class='highlight' ondragover='event.preventDefault()' ondrop='drop(event)'>$1</span>");

问题是，我想附上123在span标签与highlight类，但它同时附上<span class="new">123</span>和<span class="light">123</span>成另一个span标签与类highlight例如第一个像这样封闭<span class="new"><span class="highlight">123</span></span>而我希望它与的功能之前相同

Answer 1

您可以通过在您的模式之后添加负面预览来确保我们未包含另一个span标签。

var rxp = new RegExp("([0-9]+(\\.?[0-9]+)?)(?![^<]*</span>)", "gm"); 
 
var str = '<div id="rep"> asd 123 asd <span class="new">123</span> asd 123 asd <span class="light">123</span> </div>'; 
 
document.getElementById("res").value = str.replace(rxp, "<span class='highlight' ondragover='event.preventDefault()' ondrop='drop(event)'>$1</span>");

<input id="res"/>

输出：

NEW: <div id="rep"> asd <span class='highlight' ondragover='event.preventDefault()' ondrop='drop(event)'>123</span> asd <span class="new">123</span> asd <span class='highlight' ondragover='event.preventDefault()' ondrop='drop(event)'>123</span> asd <span class="light">123</span> </div> 

OLD: <div id="rep"> asd                     123  asd <span class="new">123</span> asd                     123  asd <span class="light">123</span> </div>