在next js中显示不带html标签的变量的内容

ao218c7q  于 9个月前  发布在  其他
关注(0)|答案(2)|浏览(88)

例如,我在nextjs中定义了如下描述变量

description={storeDetail?.translation?.description}

字符串
和输出说明它显示了我这个<p>Tenis</p>,然而,我想显示Tenis只是没有HTML标签.
谢谢你帮我!

r6l8ljro

r6l8ljro1#

您可以通过以下方式实现这一点:使用XMLElement方法创建一个虚拟的HTML div,然后获取该div的innerText并更新变量的值
例如

const trimHTML = (content) => {
  // Create temporary div element
  var element = document.createElement('div')

  // Assign the content as innerHTML for the element
  element.innerHTML = content

  // Return the text
  return (element.innerText || element.textContent)
}

// Output: Tenis
console.log(trimHTML('<p>Tenis</p>'));

字符串

aiqt4smr

aiqt4smr2#

最简单的方法是使用dangerouslySetInnerHTML

<p dangerouslySetInnerHTML={{ storeDetail?.translation?.description }}/>

字符串
另外,还有一些库可以使用。

相关问题