将第一个文本节点包裹在具有混合内容的元素内与另一个 div答案

【问题标题】：Wrap first text node inside an element with mixed content with another div将第一个文本节点包裹在具有混合内容的元素内与另一个 div
【发布时间】：2015-08-07 05:19:29
【问题描述】：

有没有办法使用 jQuery / javascript 将此文本 W'ñÝÃáèTÿpê !!!_W 包装在下面的 html 结构中 <div></div> ？

<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>

【问题讨论】：

查看the answer，它描述了如何在列标题中实现换行。
@RohitKumar 你还在关注这个问题吗？ - 我在下面发布了一个通用解决方案...

标签： javascript jquery html css jqgrid

【解决方案1】：

使用下面的 jQuery 代码。

$('<div>').append($.trim($('.ui-jqgrid-sortable').text()))

【讨论】：

这将获取该 div 中的所有文本。如果将来在随后的跨度标签中引入任何进一步的文本，它会有风险，它会破坏。此外，这个字符串 "W'ñÝÃáèTÿpê !!!_W" 是动态的有没有办法通过 jquery/javascript 访问该字符串
text() 只会获取选择器内的文本值。如果内容是动态的，您如何将其附加到文档中。如果它是某种服务器端代码，那么您将能够包装使用该服务器脚本打印的任何文本！
是的，这个选择器太大了 $('.ui-jqgrid-sortable') 这将获取这个 div 中的任何字符串
它的 jqGRID.JS 我无法控制它的 html 结构。
我在网格中有其他列，其文本在不同语言中会有所不同。所以想要它有点通用

【解决方案2】：

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

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

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

如果要替换所有出现的单词，则需要使用正则表达式并将其声明为全局/g：

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

【讨论】：

这个字符串 "W'ñÝÃáèTÿpê !!!_W" 是动态的有没有办法通过 jquery/javascript 访问那个字符串
您应该告知我们您是如何获取动态内容的。它来自 jquery 吗？剃刀？还是别的什么？

【解决方案3】：

$("#jqgh_PageGrid_ControlType").html(function(){
  return this.innerHTML.replace("W'ñÝÃáèTÿpê !!!_W",'<div style="color:red;">Whatever</div>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<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>

【讨论】：

这个字符串 "W'ñÝÃáèTÿpê !!!_W" 是动态的有没有办法通过 jquery/javascript 访问那个字符串 -
我在网格中有其他列，其文本在不同语言中会有所不同。所以想要它有点通用
你应该提供更多关于你的意图的信息。

【解决方案4】：

您可以使用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">');

【讨论】：

【解决方案5】：

您也可以像这样在本机 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>");

【讨论】：

字符串是动态的，所以从长远来看，您将无法使用此代码！