Question

假设我有以下满足感：

<div class="example" contenteditable="true" id="test">
 <div><span class="inside" >Type here</span>" "</div>
</div>

div中有一个span元素。您还会注意到</span>和</div>

之间有空格

此空间可以只有简单的空格或单词。我如何检查这里的字符串或字符的长度？

例如，</span>please</div>的长度应为6（来自“please”）。

换句话说，我正在严格查找</span>和</div>

之间的长度

任何方法？

Answer 1

您需要使用nextSibling属性。 nextSibling属性返回紧跟在指定节点之后的节点，在同一树级别中。

请试试这个：

var length = document.getElementsByClassName("inside")[0].nextSibling.length

＆＃13;

console.log(document.getElementsByClassName("inside")[0].nextSibling.length);

＆＃13;

<div class="example" contenteditable="true" id="test">
 <div><span class="inside" >Type here</span>please</div>
</div>

＆＃13;

Answer 2

您可以获取nextSibling个span节点，然后使用其nodeValue属性来获取文字。

var node = document.querySelector('.inside').nextSibling;
console.log(node.nodeValue.length)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="example" contenteditable="true" id="test">
  <div><span class="inside">Type here</span>please</div>
</div>

使用部分jQuery，此处get(index)用于获取底层DOM元素

var contenteditable = $('[contenteditable] div span').get(0).nextSibling;
console.log(contenteditable.nodeValue.length)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="example" contenteditable="true" id="test">
  <div><span class="inside">Type here</span>please</div>
</div>

Answer 3

span右侧的文本也是文本节点，因此您可以通过element.childNodes [index]或element.lastChild检查其长度

var cont = document.getElementById('test');

console.log(cont.children[0].lastChild.length);

<div class="example" contenteditable="true" id="test">
 <div><span class="inside" >Type here </span>please</div>
</div>

检查html中的字符串长度

3 个答案: