Question

是否可以使用span元素将每个单词包装在HTML页面上？我正在尝试像

这样的东西

/(\s*(?:<\/?\w+[^>]*>)|(\b\w+\b))/g

但结果远非我所需要的。

提前致谢！

Answer 1

好吧，我不会问原因，你可以这样做：

function getChilds( nodes ) {
    var len = nodes.length;

    while( len-- ) {
        if( nodes[len].childNodes && nodes[len].childNodes.length ) {
            getChilds( nodes[len].childNodes );
        }

        var content = nodes[len].textContent || nodes[len].text;

        if( nodes[len].nodeType === 3 ) {
            var parent = nodes[len].parentNode,
                newstr = content.split(/\s+/).forEach(function( word ) {
                    var s = document.createElement('span');
                    s.textContent = word + ' ';

                    parent.appendChild(s);
                });

            parent.removeChild( nodes[len] );
        }
    };
}

getChilds( document.body.childNodes );

即使我不得不承认我还没有测试过代码。这只是我想到的第一件事。可能是马车或完全搞砸了，但是对于那种情况我知道温和善良的stackoverflow社区会踢我的屁股并且像地狱一样downvote :-p

Answer 2

你将不得不深入到“文本”节点来实现这一目标。如果不使其特定于标记，您实际上要遍历页面上的每个元素，将其包装并重新附加。

话虽如此，尝试类似于garble帖子所使用的内容（少用4个字符的单词制作适合的字母并混合字母）。

Answer 3

要从当前页面获取span标记之间的所有单词，您可以使用：

var spans = document.body.getElementsByTagName('span');
if (spans)
{
  for (var i in spans)
  {
    if (spans[i].innerHTML && !/[^\w*]/.test(spans[i].innerHTML))
    {
      alert(spans[i].innerHTML);
    }
  }
}
else
{
  alert('span tags not found');
}

Answer 4

您应该首先获取文档中的所有文本节点，然后使用其内容而不是HTML作为纯字符串。这实际上取决于您正在使用的语言，但您通常可以使用像//text()这样的简单XPath来执行此操作。

在JavaScript中，这将是document.evaluate('//text()', document.body, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null)，而不是迭代结果并分别处理每个文本节点。

Answer 5

See demo

我是这样做的，可能需要一些调整......

var wrapWords = function(el) {
    var skipTags = { style: true, script: true, iframe: true, a: true },
        child, tag;

    for (var i = el.childNodes.length - 1; i >= 0; i--) {
        child = el.childNodes[i];
        if (child.nodeType == 1) {
            tag = child.nodeName.toLowerCase();
            if (!(tag in skipTags)) { wrapWords(child); }
        } else if (child.nodeType == 3 && /\w+/.test(child.textContent)) {
            var si, spanWrap;
            while ((si = child.textContent.indexOf(' ')) >= 0) {
                if (child != null && si == 0) {
                    child.splitText(1);
                    child = child.nextSibling;
                } else if (child != null) {
                    child.splitText(si);
                    spanWrap = document.createElement("span");
                    spanWrap.innerHTML = child.textContent;
                    child.parentNode.replaceChild(spanWrap, child);
                    child = spanWrap.nextSibling;
                }
            }
            if (child != null) {
                spanWrap = document.createElement("span");
                spanWrap.innerHTML = child.textContent;
                child.parentNode.replaceChild(spanWrap, child);
            }
        }
    }
};

wrapWords(document.body);

See demo

正则表达式将每个单词包装在HTML页面上

5 个答案: