给定 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）来做！
Edit:
所以如果你注意到Render它正在使用的函数dangerouslySetHTML。
我的问题是我无法操纵呈现的字符串。
这就是我最终所做的。
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}} />
)
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
