Javascript React-突出显示给定Xpath的危险ethTML中的文本

由于以下挑战而被困数天：

目标是突出显示以“危险的HTML”格式呈现的文本的几个部分

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

{
内容：“你好，世界！
另一段。
”，
注释：[
{ranges:[{start:'/p[1]'，startOffset:0，end:'/p[1]'，endOffset:12}]}
],
引用：“你好，世界！”
}

这是简化的JSX：

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

render（）{
返回(

)
}

在没有jquery的情况下可以做到这一点吗

我找到了这个问题的答案

虽然我不能让它工作。 对不起，我是新手。

---

非常感谢你的帮助。非常感谢您的帮助。

一个不使用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;

这里的工作示例

---

希望有帮助

我做过一个像您这样的应用程序（Genius.com的高级版本），诀窍是避免协调，直接处理html和shouldcomponentupdate（）方法返回false的节点。我还能够捕捉到确切的单词，不仅是第一个或所有出现的单词，而且准确地捕捉到包含单词的选定节点。

quote

将始终包含需要高亮显示的文本？@bamse是的，这是正确的。仅使用

quote

高亮显示文本的解决方案对您有帮助吗？我不太了解XPath（也不太喜欢XPath），但是您可以不使用XPath来突出显示文本。如果有效；）-。。。对于同一“内容”文本中的多个文本部分。->不过，如果这些文本部分（“引号”）还可以通过onHover或类似方式触发，那就太好了。你说（引号）是什么意思，例如通过onHover或类似方式触发？样式设置

：hover

足够了吗？那么，您应该使用xPath吗？我混合使用了getSelection（）、节点操作和文本结构版本控制。当您突出显示节点时，节点结构将发生变化，因此我始终存储我的文本的原始版本/htmlAgain@bamse非常感谢！我同意这个答案。不过，对于“数组中的多个引号”版本，我仍然有一个小问题。这个：const regex=newregexp（

（${This.props.quotes.join（'|'）}）

）；不幸的是，它只突出显示文本中第一个引号数组中引号的文本部分。也就是说，如果数组中有三个引号，则只突出显示文本中第一个引号。即使此引号作为最后一个添加到数组中。

const regex=new RegExp（

（${this.props.quotes.join（'|'）}）

，'g'）这样做的诀窍是，数组中的所有文本部分都高亮显示。同样，问题在于，如果引用的内容是“通用的”，或者内容只是出于某种原因在文本中重复了几次，那么文本将在错误的位置突出显示。
/** 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;
}