能否使用 JavaScript 选中网页里的指定文字？

• 資深大佬 : kaiki

  没有任何可以参考的变量怎么去选取啊？这个选择的规则是什么？

• 資深大佬 : yafoo

  既然能指定到文字，那肯定能指定到选择器，把节点发出来看看，让大家帮你定位到元素

• 主 資深大佬 : LUREN

  @kaiki 文字所在的节点元素不固定，节点元素没有选择器，没有特征淹没在一大段内容里。。。
  能够确定的是需要选择的文字是固定的，移动目标节点元素有 id 选择器，这种情况还有解么？

• 資深大佬 : ClericPy

  看主的意思… 就是根据文字然后选中它, 这个选中是找到节点就行, 还是框选 createTextRange 那样?

  PS: 能直接给例子或者描述完整需求么, 有可能一开始方向就歪了啊…

• 資深大佬 : kaiki

  @LUREN 循环整个页面，处理这段文字，找到有特征的部分，用正则找出来，原来找到的部分该怎么处理怎么处理，新抓出来的这一段，该放哪放哪，这样可行吗？

• 資深大佬 : ClericPy

  听起来像 jQuery 的 contains…

• 資深大佬 : imn1

  css 选择器没有内容相关的，其实 css1/2 有，不知为何 css3 取消了
  建议用 javascript 调用 xpath 的 text()搜索节点

  另一个思路是不需要移动节点，把文字复制 /移动过去，让原节点不可见、不占位也可以

• 資深大佬 : xiangyuecn

  这是一个高级主题哦，要收费的。。虽然完成整个功能涉及的知识不多，但深度够深了

• 主 資深大佬 : LUREN

  @yafoo
  @ClericPy
  @kaiki
  @imn1
  @ClericPy 这是示例，麻烦大佬们看看 https://codepen.io/Adolph1865/pen/ZEbaLbL
• 資深大佬 : Arrowing

  可以。
  1 、遍历所有 body 下所有的含文字的节点（ div 、span 、p 等）；
  2 、筛选出 innerHTML 包含你指定文字的节点；
  3 、使用 window.getSelection 和 addRange 来 选中文字。

  “`javascript
  function selectText(text) {
  let nodes = document.querySelectorAll(‘body *’)
  let textNode
  let textStartIndex
  for (let i = 0, len = nodes.length; i < len; i++) {
  textStartIndex = nodes[i].innerHTML.indexOf(text)
  if (textStartIndex > -1) {
  if (nodes[i].children.length === 0) {
  textNode = nodes[i]
  break // 找到即返回
  }
  }
  }

  if (textNode) {
  let range = document.createRange()
  // range.selectNode(textNode)
  range.setStart(textNode.firstChild, textStartIndex)
  range.setEnd(textNode.firstChild, textStartIndex + text.length)

  let selection = window.getSelection()
  selection.removeAllRanges()
  selection.addRange(range)
  }
  }

  selectText(‘指定文字’) // 当前 V2EX 页面执行
  “`

  * 以上代码仅用于作为示例代码，并没有做边界测试，浏览器兼容，性能优化。

• 資深大佬 : vangkinva

  把 html 节点和内容都当文本，然后通过文字找到他在文本中的位置，通过向上比对找到它的节点名称，然后就找到他的节点了？

• 資深大佬 : 8qwe24657913

  用 xpath 啊
  “`javascript
  const result = document.evaluate(“//text()[contains(string(), ‘这里填文字内容’)]”, document.body, null, XPathResult.ANY_TYPE, null)
  let textNode
  while (textNode = result.iterateNext()) console.log(textNode)
  “`

• 資深大佬 : ClericPy

  我就感觉一开始需求就解读有问题…

  这种情况先把 DemoA 的数据结构化成 map, 然后再迭代 DemoB, 从 map 里取 Google 什么的, 取到就塞

• 資深大佬 : xiangyuecn

  #9 你这个 demo 倒是简单了，也太工整了吧，怎么会没有特征？一次简单的遍历全部找到需要的内容节点

  document.querySelector(“#demoBoxA”).querySelectorAll(“.row”).forEach(function(v){
  if(/Google|Huawei|BlackBerry/i.test(v.querySelector(“.col-md-6”).innerText)){//text node 内容匹配检测
  document.querySelector(“#demoBoxB”).appendChild(v) //下一步脱裤子搞事的事情自己写
  }
  })

• 主 資深大佬 : LUREN

  @Arrowing
  @8qwe24657913
  @ClericPy
  @xiangyuecn 感谢大佬们提供的解決思路，我去试试。

• 資深大佬 : rabbbit

  const rowEls = Array.from(document.querySelectorAll(“#demoBoxA .row”));
  rowEls.sort((a, b) => a.firstElementChild.innerText.localeCompare(b.firstElementChild.innerText));
  const boxB = document.querySelector(“#demoBoxB”);
  boxB.innerHTML = “”;
  for (let el of rowEls) {
  boxB.appendChild(el);
  }