Làm nổi bật khi HTML và Xpath được cung cấp

Cho HTML dưới dạng chuỗi, Xpath và offset. Tôi cần làm nổi bật từ đó.Làm nổi bật khi HTML và Xpath được cung cấp

Trong trường hợp dưới đây, tôi cần phải làm nổi bật Child 1

văn bản 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 như: /html/body/ul/li[1]/a[1]

Hiệu số: 0,7

Render - Tôi đang sử dụng react trong tôi ứng dụng. Dưới đây là những gì tôi đã làm cho đến nay.

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

Tôi muốn tránh sử dụng jquery. Bạn muốn làm trong Javascript (React quá) nếu có thể!

Edit:

Vì vậy, nếu bạn nhận thấy những Render chức năng nó được sử dụng dangerouslySetHTML. Vấn đề của tôi là tôi không thể thao tác chuỗi đó được hiển thị.

Nguồn

2017-03-18 suprita shankar

Có thể chỉ là tôi, nhưng không rõ chính xác bạn cần làm gì? Bạn có cần phải sửa đổi giá trị của 'htmlText' trước khi đặt nó trong' dangerouslySetInnerHtml' không? – hazardous

Đây có phải là đoạn mã thực tế của bạn hay chỉ là một ví dụ? Rất nhiều thứ là khó hiểu ở đây, có 'công khai' trước khi render, sau đó bạn đang cố gắng lồng' html' bên trong một 'div'. Bạn có thể vui lòng chia sẻ mã hoàn chỉnh hơn không? git repo sẽ thích hợp hơn. – hazardous

Đây là những gì tôi đã kết thúc làm.

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

Nguồn

2017-03-23 17:47:10

Xpath vốn đã là thành phần chéo và các thành phần React không nên biết nhiều về nhau. Xpath cũng về cơ bản yêu cầu tất cả DOM được tạo ra để truy vấn nó. Tôi sẽ kết xuất thành phần của bạn trước, sau đó chỉ đơn giản là thay đổi đầu ra được hiển thị trong DOM bằng cách sử dụng bộ chọn Xpath.

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

Cách sử dụng:

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

Nguồn

2017-03-20 03:49:34

Tôi có thể hiểu sai câu hỏi –

vấn đề là chúng tôi hiển thị 'htmlRender' bằng cách sử dụng' dangerouslySetHTML'. Chuỗi đó sẽ lấy những kiểu này như thế nào? –

Làm nổi bật khi HTML và Xpath được cung cấp

Trả lời

Các vấn đề liên quan