JS：在Div中获取Y字符的位置

长话短说，我想在我的Html div中创建一个非常基本的搜索。每个可能的搜索标签以$开头和结尾。每个标签都是唯一的。JS：在Div中获取Y字符的位置

我的目标是创建一个函数，该函数需要一个标记，通过div搜索，在div中找到该标记的行（Y位置）。

唯一的问题是获取字符串的行位置。我可以找到字符串是否存在，但我没有关于它在div中的位置的信息。

（在该示例中，它由getLineWhereTagIsFound(tag)表示）。

注意：我可以计算<br>的数量，直到找到标签，但我不知道它会有多可靠。

这是我到目前为止。

<div id="helpText" class='onlyTextScroll container'>   
     $Fruits$<br> 
     Fruits are very nice.<br> 
     Fruits are very nice.<br> 
     Fruits are very nice.<br> 
     Fruits are very nice.<br> 
     Fruits are very nice.<br> 
     Fruits are very nice.<br> 
     Fruits are very nice.<br> 
     Fruits are very nice.<br> 
     <br> 
     $Vegetables$<br> 
     Vegetables are very evil.<br> 
     Vegetables are very evil.<br> 
     Vegetables are very evil.<br> 
     Vegetables are very evil.<br> 
     Vegetables are very evil.<br> 
     Vegetables are very evil.<br> 
     Vegetables are very evil.<br> 
     <br> 
    </div> 


<script> 
function updateHelp(tag){ 
    var y = getLineWhereTagIsFound('$' + tag + '$'); 
    y *= lineHeight; 
    $("#helpText").scrollTop(y); 

} 
/* Example 
function updateHelp('Vegetables'){ 
    var y = getLineWhereTagIsFound('$' + 'Vegetables' + '$'); 
    //y would be 10 because $Vegetables$ is found on line 10; 
    //let say lineHeight is 10;  
    y = y*lineHeight; //10*10 

    $("#helpText").scrollTop(100); 

} 
*/ 
</script>

来源

2013-10-15 RainingChain

呀，'
'计数是一个糟糕的主意，因为文字可以去到下一行，即使没有'
'如果窗口宽度比线的长度小 – Markasoftware

你正在做这个太硬。如果将文本放入元素中，如“span”或“p”，则可以找到该元素。然后使用'element.scrollIntoView'：https：//developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView – 2013-10-15 23:04:43

其实，只有标签需要在一个元素中，如果我理解正确。 – RainingChain

function getLineWhereTagIsFound(tag){ 
    var helpText = document.getElementById("helpText"); 
    var count = 0; 
    for(var i=0;i<helpText.childNodes.length;i++){ 
     if(helpText.childNodes[i].nodeType==3){ 
      count++; 
      if(helpText.childNodes[i].nodeValue.indexOf(tag)>=0){ 
       break; 
      } 
     } 
    } 
    return count; 
    //count would be 11,not 10, because $Vegetables$ is found on line 11 
    //each <br/> one line 
}

来源

2013-10-27 17:23:50 homfen

JS：在Div中获取Y字符的位置

回答

相关问题