突出顯示何時給出HTML和Xpath

將HTML指定爲字符串，Xpath和偏移量。我需要突出顯示這個詞。突出顯示何時給出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做（反應太快）！

編輯：

所以，如果你發現它是用dangerouslySetHTML的Render功能。我的問題是我不能操縱呈現的字符串。

來源

2017-03-18 suprita shankar

這可能只是我，但它不是很清楚你到底需要完成什麼？在把它放入'dangerouslySetInnerHtml'之前，你需要簡單地修改'htmlText'的值嗎？ – hazardous

這是你的實際代碼片段還是隻是一個例子？很多東西在這裏都令人費解，在呈現之前有'public'，那麼你試圖在'div'內嵌入'html'。你可以分享一個更完整的代碼嗎？ git回購將是可取的。 – hazardous

這是我落得這樣做。

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

來源

2017-03-23 17:47:10

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>

來源

2017-03-20 03:49:34

我可能會誤解問題 –

問題是我們使用'dangerouslySetHTML'渲染'htmlRender'。該字符串如何使用這些樣式？ –

突出顯示何時給出HTML和Xpath

回答

相關問題