javascript - 在 Javascript 中，我能否获得杂乱无章的文本的确切坐标(无处不在的子节点？)

Question

请参见下面的示例:它在表格中显示文本行(这是有充分理由的，但这不是这里的问题)。

基本上，我所需要的只是一个函数，当我单击链接时，alert() 为我提供文本选择 的完美坐标。通过完美坐标，我的意思是:选择开始的行号，选择结束的行号(这两个是微不足道的，我只是使用 <td> id 中的数字，开始的偏移量选择，选择结束的偏移量。

所以，如果我选择

first line and it contains text
This is the second

我收到一条警告:

selection starts at line 1, offset 12
selection ends at line 2, offset 18

如果文本是纯文本，使用 getRange() 会非常容易(我不需要 Internet Explorer 兼容性，所以适用于 FireFox、Chrome 和 Safari 的 getRange() 没问题)。这里的问题是 <span>, <strong> and <em>标签无处不在，每个标签都是一个新的子节点。所以 getRange() 不起作用。

我还没有找到忽略标记的方法。似乎没有简单的方法可以做到这一点。但我不是 Javascript 专家，也许有一个技巧可以忽略(或使函数表现得好像忽略了)文本中的标签。

<a href="javacript: magicCode();">Select some text in the table then click here</a><br/>
<table><br/>
<tr><br/>
<td id="content1">This <span class="one">is the</span> first line <span class="two">and it contains</span> text</td><br/>
</tr><br/>
<tr><br/>
<td id="content2">This is the <span class="three">second line and it contains text</span></td><br/>
</tr><br/>
<tr><br/>
<td id="content3"><span class="four">This is <span class="five">the third</span> line and it</span> contains text</td><br/>
</tr><br/>
<tr><br/>
<td id="content4">This is <strong>the fourth <em>line</em> and it</strong> contains text</td><br/>
</tr><br/>
<tr><br/>
<td id="content5">This is the fifth line and it contains text</td><br/>
</tr><br/>
</table>

有人可以帮我写我的 magicCode() 吗？

谢谢!

Answer 1

您可以使用 .textContent 属性只获取文本值而无需 HTML。您也可以通过检查 .innerText 并在存在时使用它来轻松地使其在所有浏览器中工作，否则使用 .textContent。 innerText 适用于 IE，textContent 适用于 Firefox/Chrome 等。

这是一个示例:

 var content = document.getElementById('content1');
 if(content.innerText){
   alert(content.innerText);
 }else{
   alert(content.textContent);
 }