Question

我们假设我有这段代码

<p>FirstLevelP
    <span>SecondLevelSpan</span>
</p>
<p>FirstLevelP
    <span>SecondLevelSpan
        <p>ThirdLevelP</p>
    </span>
</p>

是否可以遍历我现在拥有的每个元素，但只获取内容，即直接节点中的内容，修改文本然后将其放在原始内容中？

示例，如果我浏览每个$('p').each并提取文本，我也会在范围内得到文本。

基本上这个：

FirstelElement: FirstLevelPSecondLevelSpan
SecondElement: SecondLevelSpanSecondLevelSpanThirdLevelP

但我希望像这样

FirstelElement: FirstLevelP
SecondElement: SecondLevelSpan
ThirdElement: FirstLevelP
FourthElement: SecondLevelSpan
FifthElement: ThirdLevelP

这可能吗？

在我的研究中，我已经在这里找到了这个答案

$("#foo")
    .clone()    //clone the element
    .children() //select all the children
    .remove()   //remove all the children
    .end()  //again go back to selected element
    .text();

但这只能解决我一半的问题。我仍然需要修改原始内容中的文字！先谢谢你们。

编辑澄清

所以基本上，我希望实现的是这样的事情：

对于每个元素，我想检查末尾是否有点。如果不是，我想添加一个。我已经成功地为头条新闻做了这样的事情：

foreach (pq($content)->filter(':header') as $headline) {
    if (substr(pq($headline)->text(), 0, -1) != '.') {
        $content = preg_replace('#(' . pq($headline) . ')#', pq($headline) . '.', pq($content));
    }
}

正如我所说，问题在于，当我有嵌套元素时，它会在整个元素之后添加点，而不是在每个子元素之后添加。

要使用我的“假定”代码，它应该看起来像这样

<p>FirstLevelP.
    <span>SecondLevelSpan.</span>
</p>
<p>FirstLevelP.
    <span>SecondLevelSpan.
        <p>ThirdLevelP.</p>
    </span>
</p>

但不幸的是，它目前看起来像这样

<p>FirstLevelP
    <span>SecondLevelSpan</span>.
</p>
<p>FirstLevelP
    <span>SecondLevelSpan
        <p>ThirdLevelP</p>
    </span>.
</p>

注意点。

Answer 1

查找和更改没有子元素的文本可以这样做：

// search every element
    $("body *").each(function(index, el) {
        // find first text node
        var node = $(el).contents().filter(function() {
            return this.nodeType === 3;
        })[0];

        // change text
        node.textContent = "new text";
    });

Answer 2

修改，更新

尝试

    $("body *").each(function (i, el) {
        if ($(el).is("p, span")) {
            $(el).text(function (idx, text) {
               var t = text.split("\n")[0];
               // if `text` string's last character is not `.`
               // concat `.` to `text` string ,
               // return `text` original string's with `.` added
               return t.slice(-1) !== "." ? t + "." : t
            })
        }
    })

$("body *").each(function (i, el) {
        if ($(el).is("p, span")) {
            $(el).text(function (idx, text) {
               var t = text.split("\n")[0];
               return t.slice(-1) !== "." ? t + "." : t
            })
        }
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>FirstLevelP
    <span>SecondLevelSpan</span>
</p>
<p>FirstLevelP
    <span>SecondLevelSpan
        <p>ThirdLevelP</p>
    </span>
</p>

迭代每个元素并仅获取直接在节点中的内容

2 个答案: