Question

假设我有以下文件：

<html>
  <body>
    <h1>Hello world</h1>
  </body>
</html>

给定字符串“Hello world”，如何搜索文档并为正确的元素生成CSS选择器（在本例中为h1）？

Answer 1

好吧，这很草率 - 如果你使用$（＆＃34;：contains＆＃34;），你可以将整个树放到最里面的元素上。使用它，您可以找到最里面的节点。

＆＃13;

var myContainer = $(":contains('Hello world') ");

while(myContainer.children().length != 0) {
    myContainer =myContainer.children();
}
myContainer.addClass("foo");

＆＃13;

.foo {
  border: 1px dotted blue;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <body>
    <h1>Hello world</h1>
  </body>
</html>

＆＃13;

或者，用一个选择器做同样的事情：

＆＃13;

$(":contains('Hello world'):not(:has(*))").addClass("foo");

＆＃13;

.foo {
  border: 1px dotted blue;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content-pane">
<div class="header-pane">
<h1>Hello world</h1>
</div>
<div class="inner-content">
<h2>
Hello world is me!
</h2>
</div>
</div>

＆＃13;

Answer 2

如果您在不使用库的情况下寻找纯粹的javascript答案，则可以使用DOM操作/遍历。

我已经调整了此代码段，该代码段用于遍历节点树并将文本内容作为字符串返回。 https://gist.github.com/padolsey/3033511

function getText(node) {

if (node.nodeType === 3) {
    return node.data;
}

var txt = '';

if (node = node.firstChild) do {
    txt += getText(node);
} while (node = node.nextSibling);

return txt;

}

function checkNode(node) {

  if (node.nodeType === Node.TEXT_NODE) {
    var expr= "Hello World";
    if (node.textContent.indexOf(expr) >= 0) {
      node.parentNode.className = "foo";
    }
  }

  if (node = node.firstChild) {
    //set to next child and continue if it exists
    do {
      checkNode(node);
    } while (node = node.nextSibling); //while has sibilings
}

}
checkNode(document.body)

.foo {
  color: red;
}

<div>

  <h1>Hello World</h1>

  <p>Hello World</p>

  <h1>Hlelo Wrldo</h1>

</div>

经过一些研究，我找到了James Padolsey的博客文章后提出了这个解决方案：Replacing text in the DOM… solved?他谈到了遍历元素以准确获取其中包含的文本的困难，因为显示给用户的文本可能分散在这样的几个子元素上：

<p>
  This is a <span class="f">te<em>st</em></span>.
</p>

该博客帖子的主题是替换文本，他创建了一个非常好的示例，说明如何在尊重奇怪的嵌套的同时如上所示。如果你对一个更强大的解决方案感兴趣而不包括一个库我建议给他的帖子读一读。它有些陈旧，但他最后的例子也起作用，也是基于我提供的相同要点。

在给定元素值的情况下，如何为DOM元素获取唯一的CSS选择器？

2 个答案: