JQuery：包含找不到文本答案

【问题标题】：JQuery :contains can't find textJQuery：包含找不到文本
【发布时间】：2017-06-26 16:51:40
【问题描述】：

我正在尝试使用 :contains 在 div 中查找文本位，它工作正常，除非遇到包含“&nbsp”或“'”的文档。

奇怪的是，我甚至可以对包含“&amp”的文本使用 :contains，但不能用于其他情况。

<div class="container">
  <div class="row">
    <div class="col-md-8">
     <div class="well">
        <div id="dText" style="background: white; height: 90%; overflow-y:auto;" ></div>
     </div>    
    </div>   
  </div>  
</div>

脚本：

var str1 = "<html><head></head><body><p>This is the doc's first sentence</p><div>not the first sentence, but it's in a div & all </div>    </body></html>";

$("#dText").html( str1 );

console.log( $("#dText").html() ); 
console.log( $("*:contains('the doc's first')") );
console.log( $("*:contains('in a div & all')") );

第二个 :contains 找到指定的文本，但第一个没有，即使我搜索“doc\'s”；是否有必要/可能转义 &nbsp 之类的字符？

主要问题我面临的是 div.html(htmlString) 正确显示内容，但是查看 console.log(div.html()) 我可以看到很多 &nbsp （即使这些不在 HTML 字符串中）当目标文本在单词之间有 &nbsp 时，这会阻止 :contains 在任何多词查询上正常工作。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

你需要换行：

console.log( $("*:contains('the doc's first')") );

到：

console.log('Second Log: ' +   $("*:contains(\"the doc's first\")").length );
                                             ^^               ^^

var str1 = "<html><head></head><body><p>This is the doc's first sentence</p><div>not the first sentence, but it's in a div & all </div>    </body></html>";

$("#dText").html(str1);

console.log('First Log: ' + $("#dText").html());
console.log('Second Log: ' + $("*:contains(\"the doc's first\")").length);
console.log('Third Log: ' + $("*:contains('in a div & all')").length);

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
    <div class="row">
        <div class="col-md-8">
            <div class="well">
                <div id="dText" style="background: white; height: 90%; overflow-y:auto;"></div>
            </div>
        </div>
    </div>
</div>

【讨论】：

【解决方案2】：

首先，您要对包含搜索字符串的元素集合进行控制台日志记录。你应该定位一个关于它的信息......就像它的class。

我在你注入的字符串中添加了类。

然后，就像说的那样，它是一个集合。像您这样的简单console.log() 将输出第一个找到的元素...可能是body 或html。您必须定位最后找到的元素，即搜索字符串中“最接近”的元素。

最后，您必须转义搜索字符串中的引号。

这是Fiddle...看看控制台。

var str1 = "<p class='myP'>This is the doc's first sentence</p><div class='myDiv'>not the first sentence, but it's in a div & all </div>";

$("#dText").html( str1 );
console.log("String: "+ $("#dText").html() ); 

var test1 = $("*:contains('the doc\\'s first')");
var test2 = $("*:contains('in a div & all')");


// Get the last element found containing the string.
console.log("1: "+test1.last().attr("class"));
console.log("2: "+test2.last().attr("class"));

【讨论】：

实际上，“simple console.log()”打印（在 FF 开发工具中）元素链，链上的最后一个元素清晰可辨，并包含我正在搜索的文本。
我不明白你的意思...有什么办法可以改善答案吗？