如何使用react和typescript从HTML/DOM中获取标题ID

szqfcxe2  于 2022-11-20  发布在  React
关注(0)|答案(1)|浏览(132)

我有一个应用程序,它使用marked.js将一些markdown文件转换为html,并将转换后的HTML显示到网页上。

// iterate over file objects which contain raw markdown
    files.forEach(file => {
        // convert file's markdown string to html string using marked.js
        const htmlString = marked(file.markDown);
        const parser = new DOMParser();
        const doc = parser.parseFromString(htmlString, 'text/html');
        const walker = document.createTreeWalker(doc, NodeFilter.SHOW_TEXT);
        // const walker = document.createTreeWalker(doc, NodeFilter.SHOW_ELEMENT);

        let currentNode = walker.currentNode;
        while (currentNode != null) {
            if (currentNode.textContent != null) {
                // index every HTML element's raw text value and assign it to an id
                searchIndexReference.push({ id: id++, text: currentNode.textContent });
                //console.log('currentNode');
                //console.log(currentNode);
            }
            const nextNode = walker.nextNode();
            if (nextNode != null) {
                currentNode = nextNode;
            } else {
                break;
            }
        }
    });

我想知道如何获取标头id值并将其添加到索引中,直到遇到下一个标头id。这样searchIndexReference就会将文本值条目链接到它所在的标头。
假设下面有一些HTML:

<h1 id="top-most-header">Top Most Header</h1>
<p>Here is some text 1</p>
<p>Here is some text 2</p>
<h2 id="some-other-section-header">Some Other Section Header</h1>
<p>Here is some text 3</p>
<p>Here is some text 4</p>

这些条目将被附加到searchIndexReference对象,如下所示。(当前头id值将被存储,直到遇到下一个头)

{id: 1, headerId: 'top-most-header', text: 'Top Most Header'}
{id: 2, headerId: 'top-most-header', text: 'Here is some text 1'}
{id: 3, headerId: 'top-most-header', text: 'Here is some text 2'}
{id: 4, headerId: 'some-other-section-header', text: 'Some Other Section Header'}
{id: 5, headerId: 'some-other-section-header', text: 'Here is some text 3'}
{id: 6, headerId: 'some-other-section-header', text: 'Here is some text 4'}

这也适用于嵌套元素,如ul、li等。
我知道当我使用
创建一个新的节点过滤器。
而不是NodeFilter.SHOW_TEXT,它显示了带有id的完整HTML头元素,但我不确定从那里去哪里。
printing out currentNode with SHOW_ELEMENT

k7fdbhmy

k7fdbhmy1#

检查父节点,如果它是标头,则保存ID

if(currentNode.parentNode.nodeName === 'H1') {
 headerId = currentNode.parentNode.id
}

相关问题