如何检测文本节点是否位于标签内

Question

我有html文件

    <div>1. <span id="el1"> hello </span> world</div>

    <div>

      <span id="el2"> first part</span>
      <span id="el3"> second part </span><br />

    </div>

我有“你好”文本节点

document.querySelector("#el1").childNodes[0] // hello
document.querySelector("#el2").childNodes[0].splitText(6) // split text node ("first" and "part")

如何检查文本节点是否被任何标签包裹。
我还可以在 first 部分 中包含文本节点“part”（因此可以有两个文本节点“first”和“part”）js splitText 方法的结果。
如何覆盖所有边缘情况？
我尝试了这个来比较一下

document.querySelector("#el1").textContent.trim() === document.querySelector("#el1").childNodes[0].nodeValue.trim()

我希望在比较时得到布尔值 true 或 false。

Answer 1

如果确实如此，您只需检查文本节点父节点是否只有 1 个子节点即可。

function isTextWrapped(textnode) {
  return textnode.parentElement.childNodes.length === 1
}



var el1Text = document.querySelector("#el1").childNodes[0] // hello
var el2Text = document.querySelector("#el2").childNodes[0].splitText(6) // split text node ("first" and "part")

console.log(isTextWrapped(el1Text))
console.log(isTextWrapped(el2Text))

<div>1. <span id="el1"> hello </span> world</div>

<div>

  <span id="el2"> first part</span>
  <span id="el3"> second part </span><br />

</div>