扫描两个 HTML 元素之间的文本并使用 .wrapAll() 函数将它们包装起来

Question

我正在处理一个论坛网页，但不允许在网页内编辑 HTML。我想隐藏文本直到悬停。这是 HTML 代码的粗略示例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>nextUntil demo</title>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<dl>
    <dd class="postprofile-info">
        <span>
            <span>
                <img src="image here">
            </span>
        </span>
        "This is the text I want to surround in a div"
        <br>
        <span class="label"></span>
        "Text from here on out can be ignored"
        <br>
    </dd>
<dl>
</body>
</html>

我知道有 .nextUntil() 和 .wrapAll() 函数，但我就是无法让它正常工作。我遇到的另一个问题是比较标签和
标签之间的信息，以确保我只将我想要的文本包装在 div 中。我的目标是将该文本包装在 div 中，以便我可以给它一个 class 并使用 css.

对其进行操作

编辑 1： 我没有提供任何 JS 的原因是因为我只测试了使用 .nextUntil() 和 .wrapAll() 的片段。这就是我的全部，而且是零碎的：

（只是测试一下是否可行:)

$( ".postprofile-info" ).nextUntil( "dt" ).css( "background-color", "red" );

（另一个测试）

$('form > span').each(function(){
    $(this).next('p').andSelf().wrapAll('<div class="test"/>');
});

（另一个测试）

var nodelist = document.getElementsByTagName("dd").length;
for (i = 0; i < nodelist-1; i++) {
    var TextDd = document.getElementsByTagName("dd")[i].innerHTML;
    if (TextDd === "For helping in the construction of the CGDT Forum"){
        $('form > span').each(function(){
            $(this).next('p').andSelf().wrapAll('<div class="test"/>');
        });
    }
}

Answer 1

使它变得不那么容易的是你试图包装一个文本节点。这不是那么容易找到的。但是像这样的东西就可以了：

$('dl > dd').each(function(index){
    var textNode = $(this).contents().get(2).nodeValue;
    console.log(textNode);
    var newHtml = $(this).html().replace(textNode,'<div class="new">'+textNode+'</div>');
    $(this).html(newHtml);
});

.new {
    border: solid 3px green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl>
  <dd class="postprofile-info">
    <span>
        <span>
            <img src="image here">
        </span>
    </span>
    "This is the text I want to surround in a div"
    <br>
    <span class="label"></span>
    "Text from here on out can be ignored"
    <br>
  </dd>
</dl>

注意：如果更改标记，这将不起作用，尤其是 .get(2) 的原因，因此文本节点必须正好位于该位置。

扫描两个 HTML 元素之间的文本并使用 .wrapAll() 函数将它们包装起来

Scanning text in between two HTML elements and wrapping them with .wrapAll() function

html

javascript

jquery

wrapall

nextuntil