Question

我正在处理一个包含contenteditable="true" div的页面，我需要将用户输入的文本解压缩为纯文本，以便稍后由其他一些javascript代码处理。然后我写了这个函数：

function extractLines(elem) {
    var nodes = elem.childNodes;
    var lines = [];
    for (i = 0; i < nodes.length; ++i) {
        var node = nodes[i];
        if (node.nodeType == 3) {
            if (node.nodeValue.length > 0) {
                lines.push(node.nodeValue);
            }
        }
        if (node.nodeType == 1) {
            if (node.nodeName == "BR") {
                lines.push("");
            }
            else {
                lines = lines.concat(extractLines(node));
            }
        }
    }
    return lines;
}

这需要一个元素，并且应该返回一个行数组。我不希望它适用于任何HTML，但它应该能够处理浏览器在div上生成的内容。目前我只在Chrome上进行测试（之后我会将这个想法扩展到其他浏览器，因为生成的html格式在可信任的div上是不同的。）

鉴于此HTML：

<div id="target">aaa<div><br></div></div>

它正确地产生：

["aaa", ""]

但我的问题是当用户插入两个连续换行符时（ Enter Enter ）。 Chrome产生了这个：

<div id="target">aaa<div><br></div><div><br></div></div>

我的代码陷入无限循环。为什么呢？

你可以试试这个：

console.log(extractLines(target));

注意：您可能需要强制删除标签（使用 Shift + Esc ）

Answer 1

<强> Live demo here (click).

var myElem = document.getElementById('myElem');
var myBtn = document.getElementById('myBtn');

myBtn.addEventListener('click', function() {
  var results = [];
  var children = myElem.childNodes;
  for (var i=0; i<children.length; ++i) {
    var child = children[i];
    if (child.nodeName === '#text') {
      results.push(child.textContent);   
    }
    else {
      var subChildren = child.childNodes;
      for (var j=0; j<subChildren.length; ++j) {
        var subChild = subChildren[j];
        results.push(subChild.textContent);
      }
    }
  }
  console.log(results);
});

旧答案

这个怎么样？的 Live demo here (click).

var myElem = document.getElementById('myElem'); var myBtn = document.getElementById('myBtn'); myBtn.addEventListener('click', function() { var results = []; var children = myElem.childNodes; for (var i=0; i<children.length; ++i) { var text = children[i].textContent; if (text) { //remove empty lines results.push(text); } } console.log(results); });

如果要保留空行，可以删除if (text)语句。

将DOM元素提取到行数组中

1 个答案:

旧答案