在Javascript中，我可以得到在标签上杂乱无章的准确坐标吗？ [英] In Javascript, can I get the exact coordinates on text cluttered with tags (childNodes everywhere?)

问题描述

参见下面的示例：它显示表中的文本行（有一个很好的理由，但这不是这里的问题）。

基本上，所有我需要的是一个函数，当我点击链接时，alert（）是我的文本选择的完美坐标。通过完美的坐标，我的意思是：选择开始的行号，选择结束的行号（这两个是微不足道的，我只使用< td> id，选择开始的偏移量，选择结束的偏移量。

所以，如果我选择

第一行，它包含文本

这是第二个

我收到一个提示：

选择从第1行开始，偏移12

选择在第2行结束，偏移18

getRange（）将非常容易（我不需要Internet Explorer兼容性，因此getRange （）适用于FireFox，Chrome和Safari是可以的）如果文本是纯文本，这里的问题是< span>，< strong>和< em> 标签无处不在，每个标签都是一个新的childNode，所以getRange（）不起作用。

我没有找到一种忽略标记的方法。似乎没有简单的方法来做到这一点。但是我不是Javascript专家，也许这是一个技巧，忽略（或使功能如同忽略）文本中的标签。

< a href =javacript：magicCode（）;>在表格中选择一些文本，然后点击这里< / a>

< table>

< tr>

< td id =content1>这个< span class =one>是< / span>第一行< span class =two>，它包含< / span>文本< / td>

< / tr>

< tr>

< td id =content2> span class =three>第二行，它包含文本< / span>< / td>

< / tr>

< tr>

< td id =content3>< span class =four>这是< span class =five>第三个< / span>行< / span>包含文本< / td>

< / tr>

< tr>

< td id =content4>强>第四< em>行< / em>它< / strong>包含文本< / td>

< / tr>

< tr>

< td id =content5>这是第五行，它包含文本< / td>

< / tr>

< / table>

任何人都可以帮我写我的magicCode（）？

谢谢！

解决方案

您可以使用 .textContent 属性来获取没有HTML的文本值。您可以通过检查 .innerText 并使用它（如果存在），否则可以轻松使其在所有浏览器中正常工作，否则使用 .textContent 。 innerText 适用于IE和 textContent 适用于Firefox / Chrome等。

这是一个例子：

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

See the example below: it shows lines of text in a table (there's a good reason for this, but that's not the issue here).

Basically, all I need is a function that alert()'s me the perfect coordinates of the text selection when I click on the link. By perfect coordinates, I mean: line number of the start of the selection, line number of the end of the selection (those two are trivial-esque, I just use the number in the <td> id, offset of the start of the selection, offset of the end of the selection.

So, if I select

first line and it contains text
This is the second

I get an alert that says:

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

It would be really easy with getRange() (I do not need Internet Explorer compatibility so getRange() which work for FireFox, Chrome and Safari is OK) if the text was plain text. The issue here is that <span>, <strong> and <em> tags are everywhere and that each of them is a new childNode. So getRange() doesn't work.

I have not found a way to ignore markup. It seems there's no easy way to do that. But I'm no Javascript expert and maybe that there's a trick to ignore (or to make the function act as if it ignored) the tags in the text.

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

Could anyone help my write my magicCode()?

Thanks!

解决方案

You can use the .textContent property to get just the text values without the HTML. You could easily make it work in all browsers as well by checking for .innerText and using that if it exists, otherwise use .textContent. innerText works in IE and textContent works in Firefox/Chrome etc.

Here's a sample of that:

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

这篇关于在Javascript中，我可以得到在标签上杂乱无章的准确坐标吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！