const handleSettingRuleChange = (value?: any) => {
if (formState?.errors?.message) trigger('message')
setValue('message', value)
console.log('Greeting->' + defaultValues.message);
const vl: string = value.replace("<div> <br></div>", " ")
console.log('handleSettingRuleChange->' + vl)}
该代码的输出如下所示。div br，我不想显示标签。即使我换了一个，它也没有消失。我该如何解决这个
示例日志:
handleSettingRuleChange->alperen <div><br></div><div>kapusuz</div><div>dfasf</div><div> </div>
这不是完全清楚所有的可能性，你可能会遇到的输入字符串，所以要确保它将始终工作返回确切的文本内容，你可能只是创建一个临时元素，并填满它的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 <div><br></div><div>kapusuz</div><div>dfasf</div><div> </div>';
console.log( returnTextContent(input) ); //alperenNEWLINEkapusuzdfasf
//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) }, "");
}您正在尝试替换确切的字符串<div> <br></div>。替换特定标签:
.replaceAll('<div>', ' ').replaceAll('</div>', ' ').replaceAll('<br>', ' ').replaceAll(' ', ' ');