在给出HTML和Xpath时突出显示

Question

在给出HTML和Xpath时突出显示

sup*_*kar 5 html javascript xpath reactjs

将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>

Run Code Online (Sandbox Code Playgroud)

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}} />
   )

Run Code Online (Sandbox Code Playgroud)

我想避免使用jquery.如果可能的话,想用Javascript(React)做!

编辑:

所以如果你注意到Render它正在使用的功能dangerouslySetHTML.我的问题是我无法操纵渲染的字符串.

Answer 1

sup*_*kar 5

这就是我最终做的事情.

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}} />
   )

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，7 月前
查看次数：	536 次
最近记录：	8 年，6 月前