Question

我有这个：

<p><strong>test the strong tag</strong> some dummy text <a href="#" target="_blank">test the link</a> some other text <a href="#" target="_blank">Test another link</a></p>

我需要一个JS数组：

['<strong>Test the strong tag</strong>', 'some', 'dummy', 'text', '<a href="#" target="_blank">test the link</a>', 'some', 'other', 'text', '<a href="#" target="_blank">Test another link</a>']

帮助，我放弃了！

P.S。将一个部分的内容分配到水平幻灯片（可以左右动画）是一个更大的想法的一部分。为此我需要将每个单词包含在span中以测量其位置并确定它是否属于下一个“行”。 sry很难解释整个事情。

Answer 1

这是一个非常简洁的问题，工作真的很有趣！解决方案：假设您将p元素命名为test。像这样：

<p id="test"><strong>test the strong tag</strong> some dummy text <a href="#" target="_blank">test the link</a> some other text <a href="#" target="_blank">Test another link</a></p>

javascript将是：

var nodes = document.getElementById("test").childNodes;
var arr = [];
for(var i = 0; i < nodes.length; i++) {
    if (nodes[i].nodeName == "#text") {
        arr.push(nodes[i].nodeValue);
        continue;
    }
    arr.push(nodes[i].outerHTML);
}

这可以使用HTML的节点部分。 HTML节点包括文本和HTML元素。第一行只是获取一个名为'test'的元素的节点。第二行初始化一个数组以便稍后推送。第三行开始迭代子节点。第四到第七行处理文本节点，第八行将它添加到数组。如果你希望文本被拆分，就像你输入问题一样，这个代码就是这样做的：

var nodes = document.getElementById("t").childNodes;
var arr = [];
for(var i = 0; i < nodes.length; i++) {
    if (nodes[i].nodeName == "#text") {
        arr = arr.concat(nodes[i].nodeValue.split(" "));
        continue;
    }
    arr.push(nodes[i].outerHTML);
}
arr.filter(v=>v!='');

Answer 2

因此，您希望将每个标记放在自己的行上，并且标记中未包含的每个单词都在其自己的行上。我认为没有现成的实用工具。

我要做的是编写自定义解析器。你循环每个char并执行这两个主要检查：

当您遇到＆lt; 字符时，请切换“标记”标记。然后，您阅读标记名称，直到＆gt; char。将标记名称保存在变量中。你不断添加字符，直到找到相应的结束标记，并关闭“标记”标记。
当“tag”标志关闭时，您处于“单词模式”，因此您将继续添加字符，直到遇到空格字符。

Javascript - 从段落创建一个单词和标签数组

2 个答案: