给出 HTML 和 Xpath 时突出显示答案

【问题标题】：Highlighting when HTML and Xpath is given给出 HTML 和 Xpath 时突出显示
【发布时间】：2017-03-24 01:47:10
【问题描述】：

给定 HTML 作为字符串，Xpath 和偏移量。我需要突出显示这个词。

在以下情况下，我需要突出显示Child 1

HTML 文本：

<html>
 <body>
       <h2>Children</h2>Joe has three kids:<br/>
       <ul>
        <li>
        <a href="#">Child 1 name</a>
        </li>
        <li>kid2</li>
        <li>kid3</li>
       </ul>
 </body>
</html>

XPATH 为：/html/body/ul/li[1]/a[1]

偏移量：0,7

渲染 - 我在我的应用程序中使用 react。以下是我到目前为止所做的。

public render(){
  let htmlText = //The string above
  let doc = new DOMParser().parseFromString(htmlRender,'text/html');
  let ele = doc.evaluate("/html/body/ul/li[1]/a[1]", doc, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null); //This gives the node itself
  let spanNode = document.createElement("span");
  spanNode.className = "highlight";

  spanNode.appendChild(ele);
  // Wrapping the above node in a span class will add the highlights to that div
  //At this point I don't know how to append this span to the HTML String
  return(
    <h5> Display html data </h5>
    <div dangerouslySetInnerHTML={{__html: htmlText}} />
   )

我想避免使用 jquery。如果可能的话，想用 Javascript（React）做！

编辑：

因此，如果您注意到 Render 函数，它正在使用 dangerouslySetHTML。我的问题是我无法操纵呈现的字符串。

【问题讨论】：

可能只有我一个人，但不清楚你到底需要完成什么？是否需要简单地修改htmlText的值，然后再放入dangerouslySetInnerHtml？
这是您的实际代码 sn-p 还是只是一个示例？这里有很多东西令人费解，在渲染之前有public，然后你试图将html 嵌套在div 中。你能分享一个更完整的代码吗？ git repo 会更好。

标签： javascript html reactjs xpath

【解决方案1】：

这就是我最终要做的。

public render(){
  let htmlText = //The string above
  let doc = new DOMParser().parseFromString(htmlRender,'text/html');
  let xpathNode = doc.evaluate("/html/body/ul/li[1]/a[1]", doc, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null); 
  const highlightedNode = xpathNode.singleNodeValue.innerText;
  const textValuePrev = highlightedNode.slice(0, char_start);
  const textValueAfter = highlightedNode.slice(char_end, highlightedNode.length);
  xpathNode.singleNodeValue.innerHTML = `${textValuePrev}
                                         <span class='pt-tag'>
                                         ${highlightedNode.slice(char_start, char_end)}
                                         </span> ${textValueAfter}`;
  return(
    <h5> Display html data </h5>
    <div dangerouslySetInnerHTML={{__html: doc.body.outerHTML}} />
   )

【讨论】：

【解决方案2】：

Xpath 本质上是跨组件的，React 组件之间不应该相互了解太多。 Xpath 基本上还需要创建所有 DOM 才能查询它。我会先渲染你的组件，然后简单地使用 Xpath 选择器在 DOM 中改变渲染的输出。

https://jsfiddle.net/69z2wepo/73860/

var HighlightXpath = React.createClass({
  componentDidMount() {
     let el = document.evaluate(this.props.xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
     el.singleNodeValue.style.background = 'pink';
  },
  render: function() {
    return this.props.children;
  }
});

用法：

<HighlightXpath xpath="html//body//div/p/span">
    ... app ...
</HighlightXpath>

【讨论】：

我可能误解了这个问题
问题是我们使用dangerouslySetHTML渲染htmlRender。该字符串将如何采用这些样式？