javascript Typescript div、br和 I不希望显示标记

d6kp6zgx  于 2023-01-24  发布在  Java
关注(0)|答案(2)|浏览(135)
const handleSettingRuleChange = (value?: any) => {
if (formState?.errors?.message) trigger('message')
setValue('message', value)
console.log('Greeting->' + defaultValues.message);
const vl: string = value.replace("<div>&nbsp;<br></div>", " ")
console.log('handleSettingRuleChange->' + vl)}

此代码的输出如下所示。div br和 我不想显示标签。即使我替换了它,它也没有消失。我该如何解决这个问题
示例日志:

handleSettingRuleChange->alperen&nbsp;<div><br></div><div>kapusuz</div><div>dfasf</div><div>&nbsp;</div>
esbemjvw

esbemjvw1#

我们并不完全清楚你在输入字符串中遇到的所有可能性,所以为了确保它总是准确地返回文本内容,你可以创建一个临时元素,并用该字符串填充它的innerHTML,这样当获取它的textContent时,你将返回与呈现html时完全相同的文本内容。
但是由于.textContent不会自动将<br>元素计为新行,你可能需要递归地处理html元素及其所有子元素,如果发现任何节点是BR类型,就返回一个新行。
我对答案进行了编辑,以便现在将***br***考虑在内。
我使用.childNodes而不是.children,因为我希望访问所有的子节点,包括仅仅是text nodes而不仅仅是html元素的节点。
我使用reduce从一个给定的数组--子节点--中得到一个字符串结果。

参考文献:

https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

const input = 'alperen&nbsp;<div><br></div><div>kapusuz</div><div>dfasf</div><div>&nbsp;</div>';

console.log( returnTextContent(input) ); //alperen\NEWLINEkapusuzdfasf

//creates a temp div element with the given html as its content and returns its rendered text content
function returnTextContent(html){
  const tempContainer = document.createElement('div');  
  tempContainer.innerHTML = html;
  return getTextContent(tempContainer);  
}

//walks through node and its children to return its text content
function getTextContent(node){    
  //if node is of type <BR> returns newline
  if(node.tagName == 'BR')
    return "\n";
  //else if node has no children returns its .textContent
  if(node.childNodes.length == 0)
    return node.textContent;     
  //else return the concatenated text content of its children
  return [...node.childNodes].reduce(
    (textContent, child) => { return textContent += getTextContent(child) }, "");  
}
guicsvcw

guicsvcw2#

您正在尝试替换完全相同的字符串<div>&nbsp;<br></div>。替换特定标记:

.replaceAll('<div>', ' ').replaceAll('</div>', ' ').replaceAll('<br>', ' ').replaceAll('&nbsp;', ' ');

相关问题