反应-高亮显示给定Xpath的危险地设置HTML内的文本

Question

面对以下挑战，困了几天：

目标是突出显示以“ dangerouslySetInnerHTML”呈现的文本的多个部分。

应呈现的文本对象包括文本内容的完整html和注释数组，其中每个注释包含应突出显示的文本部分的字符串和X路径（范围）。

{
 content: "<div><p>Hello world!</p><p>Another paragraph.</p></div>",
 annotations: [
   {ranges: [{start: '/p[1]', startOffset: 0, end: '/p[1]', endOffset: 12}]}
 ],
 quote: "Hello world!"
}

这是简化的JSX：

render () {
    return (
      <div className="textcontainer">
       <p className="textcontent" dangerouslySetInnerHTML={{__html: this.state.text.content}} />    
      </div>            
   )
  }

是否可以在没有jquery的情况下做到这一点？

我找到了关于该主题的答案   Highlighting when HTML and Xpath is given

尽管我无法使其工作。   抱歉，这里有React JS新手。   非常感谢您的帮助。任何帮助都非常感谢。

Answer 1

不使用Xpath的一种可能的解决方案：

/** highlightXpath.js */
import React from "react";
import "./highlight.css";

class HighlightXpath extends React.Component {
  render = () => {
    /**
     * This creates the regex to find the wanted `quote`.
     * If you want to highlight all the occurrences of a `quote`, not
     * only the first occurrence, add 'g' as the second parameter:
     * ex: const regex = new RegExp(`(${this.props.quote})`);
     * If you want to highlight multiple quotes from an array
     * you could do
     * const regex = new RegExp(`(${this.props.quotes.join('|')})`);
     */
    const regex = new RegExp(`(${this.props.quote})`);
    /**
     * In `content` we wrap `quote`'s occurrence(s) in `em`s
     * with a class `highlighted`. Please note that this will
     * be rendered as html, not React, so `class` is used instead
     * of `className`.
     */
    const highlightedHtml = this.props.content.replace(
      regex,
      "<em class='highlighted'>$1</em>"
    );
    return (
      <div ref="test" dangerouslySetInnerHTML={{ __html: highlightedHtml }}     />
    );
  };
}

export default HighlightXpath;

---

/** highlight.css */
.highlighted {
  font-style: normal;
  background: yellow;
}

.highlighted:hover {
  background: lime;
}

这里的工作示例

希望有帮助！

Answer 2

我已经完成了一个像您这样的应用程序（Genius.com的高级版本），其诀窍是避免和解并直接在html上工作，并且节点应该在shouldcomponentupdate（）方法上返回false。我不仅能够捕获确切的单词，而且不仅能够捕获第一个或所有出现的单词，而且还能精确捕获包含该单词的选定节点。