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 sit amet，consectetur adipiscing elit。在volutpat iaculis中的Praesent tristique elit（...）

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

通常情况下，我会用

打印我的文字

<p>{string}</p>

但我猜它应该像

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

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

Answer 1

这个怎么样：

＆＃13;

.highlight {
  font-weight: bold;
  color: red;
}

.standard {
  color: grey;
}

＆＃13;

  <div id="root"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

＆＃13;

{{1}}

＆＃13;

Answer 2

我建议包括您打算强调的短语。我不确定你为什么要在你的数据结构中使用id，也许它在数据库中是有意义的，但在视图中它们当然不需要包括在内。

{
    phrase: string,
    note: string
}

这就是解析短语的输入句子所需的全部内容，匹配时将其替换为悬停时会显示音符的元素。

至于实现，找到短语就像获取索引sentence.indexOf(phrase)一样简单，然后使用索引sentence.substr(0,index) + note + sentence.substr(index+phrase.length)来改造句子，并使用您创建的支持该笔记的html。由于此实现的大部分将取决于如何创建，支持或挂钩注释，我将让您自行决定该部分。

Answer 3

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

stateShape：

{
    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添加为字符串，并且根据answer你可能想要使用dangerouslySetInnerHTML属性，如上所述

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

3 个答案: