将窗口滚动到大量文本中的特定文本（React）-解网

问：

（这都是在基于类的组件中）

我有一个组件，它基本上处理将文本文件逐行转储到页面上。该文本文件的每个句子都由一行分隔，并在其自己的元素中，如下所示：<p>

{this.state.contract.text.map((line, index) => (
                      <p key={index}>{line}
                      <Highlighter
                      highlightClassName="MyHC"
                      highlightStyle={{backgroundColor: "#ffd500"}}
                      searchWords={queryWords} 
                      autoEscape={true}
                      textToHighlight={line}/> 
                      </p>
                    ))}

我很好奇我如何滚动到这个大型文本转储中的特定文本位，特别是出现在 queryWords 中的单词，它只是一个字符串。我猜，在呈现整个页面后，我必须这样做，但不确定我会在哪里调用一个函数，该函数可以在考虑该 queryWords 变量的情况下执行类似操作。理想情况下，文本会根据整个文本中的 queryWords 突出显示，然后窗口滚动到突出显示的第一个实例。<p>

我有一种方法是只接受这个queryWords并用它做一些事情：

$(`*:contains('${queryWords}'):first`);

但这给我带来了一些麻烦。是否有任何其他方法可以滚动到已呈现的特定文本字符串（以及我在哪里调用函数来执行此操作，在第一个代码片段之后或在 componentDidMount 中）？

reactjs react-class-based-component（基于JavaScript、Reactjs、React-Class-based-Component）

一种方法是将 or 目标（例如或，以便可以使用诸如之类的函数将其作为目标）附加到要突出显示的文本中。然后，您可以找到它在页面上的位置，并使用滚动到它。我会发布一个答案，但我对正在使用的组件了解不够。refidclassdocument.getElementByIdelement.getBoundingClientRect()window.scrollTo(...)Highlighter

0赞 Harrison 6/22/2023

还有这篇文章，medium.com/@krith/...

答：

0赞 AbuAli 6/22/2023 #1

制作一个输入 HTML 标签和一个按钮。写下文本并按下按钮，它将找到它的位置并滚动它。

html格式：

<button onclick="findt()" type="submit" class="btn btn-danger">Find Text</button>
<input id="inputtext" value="">

JavaScript的：

function getOffset(el) {
  const rect = el.getBoundingClientRect();
  return {
    left: rect.left + window.scrollX,
    top: rect.top + window.scrollY
  };
}
function findt(){
    var text = document.getElementById("inputtext").value;
    var pels = document.querySelectorAll("p");
    for (var pe of pels){
        var te = pe.innerHTML;
        console.log(text);
        console.log(te.match(text));
        if (te.match(text)!=null){
            console.log(pe.innerHTML);
            var rect = getOffset(pe);
            console.log(rect);
            console.log(rect.left);
            console.log(rect.top);
            window.scrollBy(rect.left,rect.top)
        }
    }
}

将窗口滚动到大量文本中的特定文本（React）

Scrolling the window to specific text within a large amount of text (React)

评论

评论

将窗口滚动到大量文本中的特定文本 （React）

Scrolling the window to specific text within a large amount of text (React)

评论

评论

将窗口滚动到大量文本中的特定文本（React）