0

好的，我正在尝试找到一个 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输入文本循环运行，由 my 上的输入更改事件触发contenteditable div。我需要在模式所在的每个位置分隔文本的数组版本。请不要图书馆。

4

4 回答 4

1

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

首先，让我们抓取editdiv 的内容

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

现在，我们创建一个小函数来遍历我们的 DOM。有很多方法可以做到这一点，以下是 Douglas Crockford 在他的书“JavaScript : The Good Parts”iirc 中的做法：

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

此函数遍历 dom 中的每个元素node并在其上运行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
        }
    }
});

这是所有工作的小提琴

完成所有查找工作后，您可以轻松地从其余数据中提取所需的任何文本/数据。请参阅这个问题，了解为什么使用正则表达式解析 HTML 通常是一个坏主意。

于 2013-03-19T01:35:49.697 回答
0

旗帜应该在外面：

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

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

于 2013-03-19T01:12:46.040 回答
0

我看到了一些潜在的问题：（1）你希望你的标志（gis）在//标记之外。(2) 您第一次使用|需要括号来匹配\r,\n或\r\n。不过，您可能根本不需要这些。(3) 我不知道你为什么在这里有一个替代品：\n|<div>。(4)s不是我知道的标志。

这应该可以解决问题：

/<div>(.*?)<br>(.*?)<\/div>/gi
于 2013-03-19T01:14:14.740 回答
0

1）正则表达式标志应该在关闭“/”之后

2) 使用 [\S\s]* 而不是 .*

3) "<text" 是错误的 html 代码，因为 "<" 应替换为 "<"

于 2013-03-19T01:16:00.550 回答