Question

我需要创建一种方法，用html封装html页面中的所有非html单词。一个例子：

<p id="paragraph"><a href="http://www.google.com">Google it!</a>But I <b>must</b> explain to you</p>

应改为

<p id="paragraph"><a href="http://www.google.com"><span id="word1">Google</span> <span id="word2">it!</span></a><span id="word3">But</span> <span id="word4">I</span> <b><span id="word5">must</span></b> <span id="word6">explain</span> <span id="word7">to</span> <span id="word8">you</span></p>

我试图提取所有单词：

group_text = $("#paragraph").text().trim().split(" ");

然后使用选定的html封装每个单词，但这会删除文档可能具有的所有其他现有html

for (var it = 0; it < group_text.length; it++) {
    group_text[it] = $('<span/>', {
        id: 'word' + (it+1),
        html: group_text[it]
    }).append(" ");
}

任何可能有效的解决方案？

Answer 1

您需要编写递归函数来处理嵌套文本。也许是这样的：

function wrap($node) {
    $node.contents().each(function() {
        if (this.nodeType === 3) {
            $(this).replaceWith(this.nodeValue.trim().split(/\s+/).map(function(el) {
                return '<span class="word' + ++i + '">' + el + '</span>';
            }));
        }
        else if (this.nodeType === 1) {
            wrap($(this));
        }
    });
}

var i = 0;
wrap($('#paragraph'));

alert($('#paragraph').html())

span {
    border-bottom: 1px dashed #AAA;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="paragraph"><a href="http://www.google.com">Google it!</a>But I <b>must</b> explain to you</p>

如果节点类型为3，则需要将文本拆分为单个单词并将每个单词包装为span。如果节点类型为1，则这是元素节点， - 再次调用wrap函数。

在html文档中封装非html文本

1 个答案: