Question

好的，我正在尝试找到一个dom模式：

 <div>
    <br>
    </div>

来自我的contenteditable div，通常看起来像这样，有多个spans：

<div id="edit" contenteditable="true">
    <span>text</span>   
    <span>text</span> 
    //and more spans maybe 
     <div>
        <br>
     </div>
</div>

我正在使用的代码行是：

return string.split(/\r\n?|\n|<div>(.*?)<br>(.*?)<\/div>,gis/);

问题在于正则表达式<div>(.*?)<br>(.*?)<\/div>,gis的这一部分..它永远不会匹配，即使模式存在。为了清楚起见，return在输入文本的循环中运行，由我contenteditable div上的输入更改事件触发。我需要在模式所在的每个位置分隔的文本的数组版本。请不要这个库。

Answer 1

这是一个不涉及任何外部库并且易于理解的解决方案。

首先，让我们抓住edit div的内容

var $edit = document.getElementById("edit")

现在，我们创建一个小函数来迭代我们的DOM。有很多方法可以做到这一点，道格拉斯·克罗克福德在他的书“JavaScript：The Good Parts”中做到了这一点：i / c>

function walkTheDOM(node, func) {
    func(node);
    node = node.firstChild;
    while (node) {
        walkTheDOM(node, func);
        node = node.nextSibling;
    }
}

此函数遍历node dom中的每个元素，并在其上运行func。

唯一剩下的就是从之前的$edit div调用它。

walkTheDOM($edit, function (node) {
    if (node.nodeName.toLowerCase()==="div") { // we got a div
        if(node.innerHTML.trim() === "<br>"){ //whose inner html is <br>
           console.log("GOT",node);//print its name
        }
    }
});

这是fiddle of it all working

在完成找到它的所有工作后，您可以轻松地从其余数据中提取您想要的任何文本/数据。 See this question关于为什么用正则表达式解析HTML通常是一个坏主意。

Answer 2

旗帜应该出去：

return string.split(/\r\n?|\n|<div>(.*?)<br>(.*?)<\/div>/gis);

我对正则表达式不是很好，但对我来说这似乎也太贪婪了。我相信它会匹配任何包含br的div，而不仅仅是那些只包含br的div。如果它们是嵌套的，它应该与最外面的一个匹配。我按照评论中的建议，通过遍历DOM来解决这个问题。

Answer 3

我发现了一些潜在的问题：（1）您希望您的旗帜（gis）超出//标记。（2）您首次使用|需要使用括号来匹配\r，\n或\r\n。你可能根本不需要这些。（3）我不确定你为什么在这里有替补：\n|<div>。（4）s不是我所知道的旗帜。

这应该可以解决问题：

/<div>(.*?)<br>(.*?)<\/div>/gi

Answer 4

1）Regexp标志应该在关闭“/”

之后

2）使用[\ S \ s] *而不是。*

3）“＆lt; text”是错误的html代码，因为“＆lt;”应替换为“＆amp; lt;”

REGEXP in .split（）

4 个答案: