使用JavaScript在字符串中突出显示单词的数据结构

Question

我有一个字符串

const string = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tristique elit in volutpat iaculis. Proin a tincidunt turpis, et condimentum libero. Duis convallis nulla eu mattis porta. Nulla facilisi. Proin nec viverra orci. Nunc aliquam enim orci, ut dictum ipsum auctor ut. Quisque consectetur vestibulum tortor, mollis hendrerit velit hendrerit vel. In hac habitasse platea dictumst. Morbi volutpat lectus purus, eu sagittis odio viverra in. Phasellus vel volutpat felis. Proin a metus sit amet ipsum congue faucibus nec faucibus nisl. Aenean eu nisl ac velit dapibus vulputate non efficitur urna. Phasellus laoreet suscipit dictum. Curabitur sit amet justo at nisi dictum dapibus."

我希望能够突出显示一些连贯的单词序列,并在悬停单词时显示工具提示.

数据结构对此有何看法？

我想它应该是这样的

id, wordIndexStart, wordIndexEnd, note
=======================================
1, 0, 5, Some note

为了突出前6个单词,给我一些类似的东西

Lorem ipsum dolor坐下来,精致的adipistur elit.在volutpat iaculis(...)的Praesent tristique elit

但是如何使用React中的突出显示文本或类似内容返回此字符串？

通常情况下,我会打印我的文字

<p>{string}</p>

但我想它应该是这样的

<p>{string.split(" ").map(word => <span>{word}).join(" ")</p>

但是如何创建一个<span>例如6个第一个单词呢？

Answer 1

使用 React 时，您需要将突出显示逻辑移至函数render外部

状态形状：

{
    content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tristique elit in volutpat iaculis. Proin a tincidunt turpis, et condimentum libero. Duis convallis nulla eu mattis porta. Nulla facilisi. Proin nec viverra orci. Nunc aliquam enim orci, ut dictum ipsum auctor ut. Quisque consectetur vestibulum tortor, mollis hendrerit velit hendrerit vel. In hac habitasse platea dictumst. Morbi volutpat lectus purus, eu sagittis odio viverra in. Phasellus vel volutpat felis. Proin a metus sit amet ipsum congue faucibus nec faucibus nisl. Aenean eu nisl ac velit dapibus vulputate non efficitur urna. Phasellus laoreet suscipit dictum. Curabitur sit amet justo at nisi dictum dapibus.",
    highlights: [{
        id: 1,
        wordIndexStart: 0,
        wordIndexEnd: 5,
        note: "Some note"
    }, {
        id: 2,
        wordIndexStart: 6,
        wordIndexEnd: 10,
        note: "Some other note"
    }]
}

连接组件的mapStateToProps：

function mapStateToProps(state, ownProps) {
    const { content, highlights } = state;

    // Move this logic to ReSelect? https://github.com/reactjs/reselect
        const words = content.split(" ");

        const wordsWithHighlights = words.map((word, index) => {

            const highlightStart = highlights.find((highlightItem) => {
                return highlightItem.wordIndexStart == index;
            });
            if (highlightStart) {
                return `<span title=${highlightStart.note}>${word}`;
            }

            const highlightEnd = highlights.find((highlightItem) => {
                return highlightItem.wordIndexEnd == index;
            });
            if (highlightEnd) {
                return `${word}</span>`;
            }

            return word;
        });

    return {
        content: wordsWithHighlights.join(" ")
    };
}

然后是渲染函数：

render() {
    const { content } = this.props;
    return (
        <p dangerouslySetInnerHTML={{ __html: content }} />
    )
}

正如@jordan指出的，你不能在React中添加HTML作为字符串，并且根据这个答案你可能想要使用dangerouslySetInnerHTML属性，就像上面一样