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字符的位置

回答

相關問題