将具有混合内容的元素中的第一个文本节点与另一个div包装在一起

问题描述

有没有一种方法可以使用jQuery / javascript在<div></div> html <div></div> W'???áèT?pê !!!_W文本W'???áèT?pê !!!_W包装在以下html结构中？

<div id="jqgh_PageGrid_ControlType" class="ui-jqgrid-sortable">
    W'???áèT?pê !!!_W<span class="s-ico" style="display:block">
        <span sort="asc" class="ui-grid-ico-sort ui-icon-asc ui-state-disabled ui-icon ui-icon-triangle-1-n ui-sort-ltr"></span>
        <span sort="desc" class="ui-grid-ico-sort ui-icon-desc ui-state-disabled ui-icon ui-icon-triangle-1-s ui-sort-ltr"></span>
    </span><button class="grid-header-filter-btn ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" role="button" title="">
        <span class="ui-button-icon-primary ui-icon ui-icon-gear"></span>
        <span class="ui-button-text"></span>
    </button>
</div>

这应该按照您的要求进行。

您可以使用以下内容替换页面正文中第一个出现的单词：

var replaced = $("body").html().replace('W'???áèT?pê !!!_W','<div>W'???áèT?pê !!!_W</div>');
$("body").html(replaced);

如果要替换所有出现的单词，则需要使用regex并将其声明为global / g：

var replaced = $("body").html().replace(/W'???áèT?pê !!!_W/g,'<div>W'???áèT?pê !!!_W</div>');
$("body").html(replaced);

您可以使用jQuery函数contents()获得所有子节点，包括文本节点。

然后，您可以使用jQuery函数filter()按类型过滤节点。

最后，使用jQuery函数first()仅获取第一个文本节点（您发布的代码只有一个，但是谁知道如果您不受控制，可能会添加什么）

...因此，这将获取#jqgh_PageGrid_ControlType <div>的直接后代的第一个文本节点，并将其包装在全新的（积极的红色） <div> ：

$('#jqgh_PageGrid_ControlType').contents().filter(function(){
    return this.nodeType === 3;
}).first().wrap('<div style="background:#f00">');

您也可以像这样在本机javascript中执行此操作。

     var jqgh_PageGrid_ControlType = document.getElementById('jqgh_PageGrid_ControlType');

         jqgh_PageGrid_ControlType.innerHTML = jqgh_PageGrid_ControlType.innerHTML.replace("W'???áèT?pê !!!_W", "<div>W'???áèT?pê !!!_W</div>");