Strip tag from text (in React JS)

你说的曾经没有我的故事 提交于 2021-02-19 05:33:54

问题


I have multiple whole html code in variable cleanHTML and i need to strip specific tags from text.

let cleanHTML = document.documentElement.outerHTML

this:

<span class="remove-me">please</span>
<span class="remove-me">me too</span>
<span class="remove-me">and me</span>

to this:

please
me too
and me

I´m trying to do it with:

var list = cleanHTML.getElementsByClassName("remove-me");
var i;
for (i = 0; i < list.length; i++) {
  list[i] = list[i].innerHTML;
}

But i´m getting error from React cleanHTML.getElementsByClassName is not a function

Any idea how to do it in a way React likes?


回答1:


I am guessing from your specification that your cleanHTML is a string, so you would need to convert the string to a node (eg: by creating a div from it), and then parsing the nodes appropriately.

Please note that you really need to request the textContent and not the innerHTML, as you do not want to have any html in your react output

const htmlContent = `<span class="remove-me">please</span>
<span class="remove-me">me too</span>
<span class="remove-me">and me</span>`;

const getNodesToRemoveFromElement = (stringContent) => {
  const el = document.createElement('div');
  el.innerHTML = stringContent;
  return el.getElementsByClassName('remove-me');
};

for (let node of getNodesToRemoveFromElement( htmlContent ) ) {
  console.log( node.textContent );
}



回答2:


Your cleanHtml is a string and not a node. So getElementsByClassName does not apply as it is not a string function

You can use regular expressions to do this. Following code might help.

var stripedHtml = cleanHtml.replace(/<[^>]+>/g, '');

And stripedHtml will have your html content without tags.



来源:https://stackoverflow.com/questions/52257993/strip-tag-from-text-in-react-js

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!